如何更改反应钩子中的对象值？答案

【问题标题】：how to change object value in react hooks?如何更改反应钩子中的对象值？
【发布时间】：2020-07-03 10:13:41
【问题描述】：

当handleChange我点击setMode到{mode：'dark'}时，我有一个对象{mode：'light'}的状态，当再次点击handleChange时它应该返回到{mode：'light'}流程是和切换钩子一样，但是使用一个对象，我尝试了几次，但没有成功，我该怎么做？

这是我的状态模式

 const [mode, setMode] = useState({
    mode: 'LIGHT'
  })

这是我的活动

const handleChangeTheme = (e) => {
    setMode({
      ...mode,
      mode: 'DARK'
    })
  }

我把状态扔给另一个组件显示状态

<Navbar handleChangeTheme={handleChangeTheme} mode={mode.mode} />

这个组件导航栏

 <li onClick={handleChangeTheme}>
    <span className='nav-item nav-link'>
        <b>{checked}</b>
     </span>
  </li>

当点击 handleChange 时，它应该看起来像 true 或 false，但这是一个对象

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你可以像下面这样。当对象被分配为新对象时，状态变化会反映出来

const handleChangeTheme = (e) => {
  let newMode = Object.assign({}, mode);
  newMode.mode = mode.mode === "LIGHT" ? "DARK" : "LIGHT";
  setMode(newMode);
};

【讨论】：

【解决方案2】：

你实际上并没有切换模式，试试using functional updates：

const toggleMode = () =>
  setMode((prev) => ({ ...prev, mode: !prev.mode }));

<li onClick={toggleMode}>...</li>;

【讨论】：

【解决方案3】：

如果您将状态更改为boolean，它将简化。

const [mode, setMode] = useState(true);

<Navbar
  handleChangeTheme={() => setMode(!mode)}
  mode={mode ? "LIGHT" : "DARK"}
/>;

【讨论】：