嵌套对象状态设置

Question

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

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

Answer 1

toggle中没有使用OwnToggle：

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

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

您不会通过状态object：

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

Answer 2

您传递的是const而不是父状态

// obj is a const
<FirstRow toggle={obj} toggleSwitchHandler={toggleSwitchHandler} />
<SecondRow toggle={obj} toggleSwitchHandler={toggleSwitchHandler} />

尝试传递变化的状态

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

Answer 3

您没有使用反映检查状态的toggle。但是您使用了value，但从未设置。

import React from "react";
import Toggle from "react-toggle";

const OwnToggle = props => {
  // here you have to use toggle, not value
  const { toggle, path, toggleSwitchHandler } = props;

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

export default OwnToggle;

此外，您还必须在App.js中传递object而不是obj。

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

您的toggleSwitchHandler中应该进行修改：

const toggleSwitchHandler = (path, e) => {
    const tempObject = { ...object };
    set(tempObject, path, !get(object, path)); // get from lodash
    setObject({ ...object, ...tempObject });
};