javascript - 在 useState 钩子(Hook)中 react 设置状态

Question

我在使用 useState Hook 更新状态时遇到问题。
所以在我的“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}下到另一个组件，我们称之为“菜单”。
在这个“菜单”组件中，我呈现每个标题并在它们旁边有一个复选框，它应该设置“事件”属性。像这样:

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

但是当我点击任何一个复选框时，我会收到错误 “类型错误:无法读取未定义的属性‘事件’” .但是，它来自我的父组件(“App”)，而不是来自“菜单”。
我尝试了多种方法来渲染元素并调用 setPanelSettings功能，但到目前为止没有任何效果。我还从“菜单”组件中注销了该对象，似乎“事件”属性在那里发生了变化。

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