javascript - 更改子组件状态会更改父组件 Prop

Question

父组件是一个header

子组件是一个表单，用于在触发 redux 操作的保存后更改 header 中出现的值。

我设置了子状态

constructor(props) {
    super(props);
    this.state = {
      object: { ...props.object },
      hidden: props.hidden,
    };
}

表单用于渲染state.object和修改state.object。当我修改 state.object 时，来自父组件的 props 也会发生变化。

handleObjectChange = (event, key, subkey) => {
    console.log('props', this.props.object.params);
    console.log('state', this.state.object.params);
    event.preventDefault();
    const value = this.handlePeriod(event.target.value);
    this.setState((prevState) => {
      const object = { ...prevState.object };
      object[key][subkey] = value;
      return { object };
    });
}

控制台输出:

newvalueijusttyped
newvalueijusttyped

这种行为实际上一直持续到修改 redux 存储，而无需分派(dispatch)操作。

希望能解决这个问题

更新:

将构造函数更改为此解决了问题

constructor(props) {
    super(props);
    this.state = {
      object: JSON.parse(JSON.stringify(props.object)),
      hidden: props.hidden,
    };
 }

为什么对象展开运算符没有达到我想要达到的目的？

Answer 1

Javascript 对象是通过引用赋值的，所以当你这样做的时候

constructor(props) {
    super(props);
    this.state = {
      object: props.object,
      hidden: props.hidden,
    };
}

state 引用 redux 状态对象(如果它是 redux 状态)。所以现在当你使用

this.setState((prevState) => {
  const object = { ...prevState.object };
  object[key][subkey] = value;
  return { object };
});

虽然您会假设您已将对象值克隆到一个新对象中。然而，Spread 语法只做对象的一级复制。

来自 Spread Syntax MDN docs :

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it's the same with Object.assign() and spread syntax).

var a = [1, [2], [3]]; var b = [...a]; b.shift().shift(); // 1 // Now array a is affected as well: [[], [2], [3]]

如此有效

object[key][subkey] = value;

直接在 redux store 中更改值。

解决方案是创建一个嵌套副本，例如

  const object = { ...prevState.object,
                      [key]: {
                          ...prevState[key],
                          [subkey]: { ...prevState[key][subkey]}
                      }
                   };
  object[key][subkey] = value;