Javascript 在useState钩子中反应设置状态

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

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

{panelSettings.map（元素=>{
返回(
{element.title}
setPanelSettings（element.active=！element.active）}/>
)
})}

但是，当我单击任何复选框时，我得到错误“TypeError:无法读取未定义的属性'active'”。但是，它来自我的父组件（“应用程序”），而不是“菜单”。
我尝试了多种方法来渲染元素并调用

setPanelSettings

函数，但到目前为止没有任何效果。我还从“菜单”组件中注销了该对象，似乎“活动”属性在那里发生了更改。

当您这样做时

setPanelSettings(element.active = !element.active)

您正在从更改面板设置

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

---

你到底是从哪里得到错误的？它是来自onChange函数还是来自checked属性？ 如果在onChange函数中，则必须使用前一个状态来更新新状态，因此应该是这样的：

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

       return menuInput;
   });
})

---

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

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

{panelSettings.map（元素=>{
返回(
{element.title}
{
const next=[…面板设置]；
下一个[索引]。活动=！下一个[索引]。活动；
设置面板设置（下一步）；
} />
)
})}

---

我相信这不是最复杂的，但我真的不知道如何以更简洁的方式解决它，它完成了任务。因此，感谢大家的回答。

您可以参考这一条。我相信它涵盖了你的情况：。useState不会合并对象的所有值。您能查看标题吗？是的，在我单击其中一个复选框之前，一切都正常。如果需要我的旁注，这会起作用，但它不会使用以前的状态？