更改子组件状态会更改父组件道具

Question

父组件是一个header

子组件是一个 form，用于在保存后触发 redux 操作来更改标题中出现的值。

我用

设置子状态

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

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

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 存储而无需分派操作。

不胜感激这个问题的解决方案

更新：

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

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 state object（如果它是一个 redux 状态）。所以现在当你使用

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

虽然您会假设您已将对象值克隆到一个新对象中。然而，Spread 语法只对对象进行一级副本。

来自Spread Syntax MDN docs：

注意：传播语法在复制一个 大批。因此，它可能不适合复制多维 如下例所示的数组（与 Object.assign() 和传播语法）。

var a = [1, [2], [3]];变种 b = [...a]; b.shift().shift(); // 1 // 现在数组 a 也受到影响：[[], [2], [3]]

这么有效

object[key][subkey] = value;

直接在 redux store 中更改值。

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

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

Answer 2

javascript 中的对象是“通过引用传递”的。

如果您将父母的道具作为状态传递给孩子，那么当您更改状态时，您实际上是在改变传递给它的同一个对象。

使用 Object.assign() 创建数据的克隆，然后再将其作为子状态的一部分。