如何更改反应钩子中的 object 值？

Question

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

这是我的 state 模式

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

这是我的活动

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

我将 state 扔到另一个组件以显示 state

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

这个组件导航栏

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

单击 handleChange 时，它应该看起来像 true 或 false 但这是 object

Answer 1

你可以像下面那样做。 State 更改将反映 object 分配为新的

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

Answer 2

您实际上并没有切换模式，请尝试使用功能更新：

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

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

Answer 3

如果将 state 更改为boolean它将简化。

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

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