javascript - 复制状态以在子项中间接编辑它

Question

我在父组件中设置状态，然后将其作为 Prop 传递给子组件。在 child 中，我想复制该状态对象(通过 props 接收)进行编辑，而不更新原始状态对象。然后，我将在当前子组件中显示该信息，并将更新后的状态对象发送回父组件以更新原始状态对象。现在更新的父状态将用于在其他子元素中显示信息。

在子组件中 - 其中“this.props.shifts”是从父组件传递下来的状态:

this.dowCopy = { ...this.props.dow };
this.state = {
    dowCopy: this.dowCopy
}

addTempShift = (day) => {
    const emptyShift = {arbitraryData};
    const dowCopyCopy = {...this.state.dowCopy};
    dowCopyCopy[day].shifts.push(emptyShift);
    this.setState({ dowCopy: dowCopyCopy })
}

一切都按预期进行，但是当我在子组件中设置状态时，它也会更新父组件中的状态。据我了解，扩展运算符获取了状态对象的副本。我错过了什么？

Answer 1

扩展语法创建浅拷贝，如 @Timothy Wilburn 所说。因此，如果直接更改复制的对象属性，则会改变原始对象属性。您可以搜索“深层复制”，也可以在子组件中再次使用扩展语法。

class App extends React.Component {
  state = {
    dow: {
      monday: { 
        shifts: [{ name: "foo" }, { name: "bar" }],
      },
    }
  }
  render() {
    return (
    <div>
      In parent: {JSON.stringify(this.state.dow)}
      <Child dow={this.state.dow} />
    </div>
    );
  }
}

class Child extends React.Component {
  state = {
    dowCopy: { ...this.props.dow }
  }

  addTempShift = (day) => {
    const emptyShift = { name: "baz" };
    this.setState( prevState => (
        {
            dowCopy: { ...prevState.dowCopy, [day]: { shifts: 
            [...prevState.dowCopy[day].shifts, emptyShift] } }
        }
    ))
  }

  componentDidMount() {
    this.addTempShift( "monday");
  }

  render() {
    return (
      <div>In Child: { JSON.stringify(this.state.dowCopy)}</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

哦， child 。

但是，我同意@George Chanturidze，你做得太过分了。不要像那样复制状态。如果您想在子组件中显示一些更改的数据，请使用此状态作为其属性来更改它。然后，如果您想更改父级的状态，请收集此数据并通过回调发送回父级并在那里设置状态。