reactjs - 嵌套对象状态设置

Question

我在设置状态时遇到问题。单击按钮后，应根据启动状态设置所有复选框的状态。不幸的是，没有任何反应。我在 setObject 方法中做错了什么？

代码来源:https://codesandbox.io/s/competent-saha-6iwjw?file=/src/App.js

Answer 1

在OwnToggle中没有使用toggle:

const OwnToggle = props => {
  // not `value`
  const { toggle, path, toggleSwitchHandler } = props;

  return (
    <Toggle checked={toggle} onChange={e => toggleSwitchHandler(path, e)} />
  );
};

并且您不传递状态对象:

// not obj
<FirstRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={object} toggleSwitchHandler={toggleSwitchHandler} />

此外，您在 toggleSwitchHandler 中改变了全局对象，然后在其上进行中继:

  const toggleSwitchHandler = (path, e) => {
    // is a SHALLOW COPY, you need a deep copy here
    const tempObject = { ...obj };
    // mutate global object
    set(tempObject, path, e.target.checked);
    // relay on global object
    setObject({ ...object, ...tempObject });
  };