如何使用useState钩子更新对象状态

Question

试图通过useState钩子更新对象状态，但似乎不起作用。只是想知道是否有人可以在这里发现我的错：

这是我的useState：

const [selectState, setSelectState] = React.useState({
  level1: 0,
  level2: 0,
  level3: 0,
});

我要更新状态的组件：

<Button
   onClick={() => setSelectState({ ...selectState, level: 1 })}
   selected={selectState === 1}
   text="Blue"
 />

Answer 1

我可以在您的代码中看到几个问题：

• setSelectState({ ...selectState, level: 1 })-您正在更新level属性，但该状态不存在。因此，您要在状态中添加一个新属性，而不是更新现有属性。

• selected={selectState === 1}-selectedState是一个对象。因此，您正在将数字与对象进行比较，并且由于严格的相等运算符（===），导致以下情况：

  selectState === 1
  

  永远不会求值为true。