在 useState 挂钩中反应设置状态

Question

我在使用 useState 挂钩更新我的状态时遇到问题。
所以在我的“App”组件中，我声明了我的 objects 状态数组：

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} 传递给另一个组件，我们称之为“菜单”。
在这个“菜单”组件中，我呈现每个标题并在它们旁边有一个复选框，它应该设置“活动”属性。像这样：

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

但是当我点击任何复选框时，我收到错误 "TypeError: Cannot read 属性 'active' of undefined"。但是，它来自我的 parent 组件（“应用程序”），而不是来自“菜单”。
我尝试了多种方法来渲染元素并调用 setPanelSettings 函数，但到目前为止没有任何效果。我还从“菜单”组件中注销了 object，似乎 'active' 属性已经在那里改变了。

Answer 1

当你这样做时

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;
}))

Answer 2

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

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

       return menuInput;
   });
})

Answer 3

评论让我走上了正轨，最后的解决方案是这样的：

{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>)
})}

我确定这不是最复杂的，但我真的不知道如何以更简洁的方式解决它并完成工作。所以谢谢大家的回答。

在 useState 挂钩中反应设置状态

React setting state in useState hook

javascript

reactjs

react-hooks

use-state