reactjs - 更新了 ReactJS 功能组件中的嵌套对象

Question

我有一系列存储在状态中的嵌套对象，我正在尝试更新电子邮件/短信数据字段。这工作得很好。

我的问题是，有没有更好的方法来编写“onChange”处理程序？

嵌套对象

  const [settings, setSettings] = useState({
    notifications: {
      contact: {
        email: true,
        sms: false
      },
      updates: {
        email: true,
        sms: true
      }
    }
  });

复选框 onChange 处理函数

  const onCheckBoxChanged = (e, settingType, settingSubType, checked) => {
    setSettings(prevState => {
      const updated = { ...prevState };
      updated.notifications[settingType][settingSubType] = checked;
      return updated;
    });
  };

复选框是语义 UI 反应的一部分。

<Checkbox checked={settings.notifications.contact.email} 
  onChange={(e, { checked }) => onCheckBoxChanged(e, "contact", "email", checked)} />

可以在此处找到一个工作示例codesandbox.io

谢谢

标签： reactjs

Answer 1

我做了一些小的优化。

见CodeSandBox

更新状态的替代方法是：

更新多维数组

我认为对这个用例使用临时变量是可以接受的。