开发者问题收集

在 useState 钩子中 React 设置状态

2020-08-10
274
javascript reactjs react-hooks use-state

我在使用 useState 钩子更新状态时遇到问题。
因此，在我的“App”组件中，我声明了对象数组状态： 

const [panelSettings, setPanelSettings] = useState([
{
  title: 'Background',
  active: true,
  options: [],
  updateDaily: true
},
{
  title: 'Time and Date',
  active: true,
  showSeconds: true
},
{
  title: 'Weather Forecast',
  active: false,
  city: null
}])

然后，我将 {panelSettings> 和 {setPanelSettings> 传递给另一个组件，我们将其称为“Menu”。
在此“Menu”组件中，我呈现每个标题，并在其旁边有一个复选框，该复选框应设置“active”属性。如下所示： 

{panelSettings.map(element => {
   return (
     <div key={element.title}>
       {element.title}
       <input type='checkbox' checked={element.active} onChange={() => setPanelSettings(element.active = !element.active)} />
     </div>)
})}

但是，当我单击任何复选框时，我收到错误 “TypeError：无法读取未定义的属性‘active’” 。但是，它来自我的父组件（“App”），而不是“Menu”。
我尝试了多种方法来呈现元素并调用 setPanelSettings 函数，但到目前为止没有任何效果。我还从“Menu”组件中注销了对象，似乎那里的“active”属性已经发生了变化。

3个回答

当您执行 

setPanelSettings(element.active = !element.active)

时，您正在将 panelSettings 从 

[{
  title: 'Background',
  active: true,
  options: [],
  updateDaily: true
},
{
  title: 'Time and Date',
  active: true,
  showSeconds: true
},
{
  title: 'Weather Forecast',
  active: false,
  city: null
}]

更改为 true 或 false 。显然不是您想要的。

您可能想要执行： 

setPanelSettings((prevState) => prevState.map((s) => {
    if (s === element) {
        return { ...s, active: !s.active };
    }
    return s;
}))
dave
2020-08-10

你到底在哪里得到错误？是来自 onChange 函数还是来自 checked 属性？ 如果是在 onChange 函数中，你必须使用之前的状态来更新新状态，所以应该是这样的： 

setPanelSettings((prevState) => {
   return prevState.map((menuInput) => {
       if (menuInput.title === element.title)
          return { ...menuInput, active: !menuInput.active };

       return menuInput;
   });
})
Darkbound
2020-08-10

评论让我走上了正确的道路，最终的解决方案是这样的： 

{panelSettings.map(element => {
  return (
    <div key={element.title}>
      {element.title}
      <input type='checkbox' checked={element.active} onChange={() => {
        const next = [...panelSettings];
        next[index].active = !next[index].active;
        setPanelSettings(next);
      } />
    </div>)
})}

我确信这不是最复杂的，但我真的不知道如何以更简洁的方式解决这个问题，而且它完成了工作。所以感谢大家的回答。

Adam
2020-08-20