Reactjs 使用props对象初始化状态是否会导致变异？

在我的React应用程序中，其中一个组件需要从props进行状态初始化

Class ComponentA extends React.Component{

    constructor(props){
    this.state = {
      objectA: props.objectA
    }

    }

    someOnclickFunction(e){
      let updatedObjA = this.state.objectA;
       updatedObjA.value = e.target.value;
      this.setState({
         objectA: updatedObjA
       })
    }
}

在上面的代码段中，

props.objectA

引用被复制到state。那么，我是不是通过更新状态间接地改变了

道具

？ 或者

setState（）

函数将克隆对象并为

objectA

保留新的引用

class ComponentA extends React.Component {
    constructor(props) {
        super(props);

        // state is null at this point, so you can't do the below.
        // this.state.objectA = props.objectA

        // instead, initialize the state like this:
        this.state = {
            objectA: props.objectA,
        };

    }

    someOnclickFunction(e) {
        // you can't set "objectA.value" like the following
        // this.setState({
        //     objectA.value: e.target.value
        // });

        // you need to create a new object with your property changed, like this:
        this.setState({
            objectA: Object.assign({}, this.state.objectA, { value: e.target.value }),
        })
    }
}

这是许多react初学者犯的错误。您不能简单地更新对象的子属性而不产生任何后果。。以下情况也可能是错误的：

someOnclickFunction(e) {
    var tmp = this.state.objectA;

    // WRONG: don't do this either, you're modifying the state by doing this.
    tmp.value = e.target.value;

    this.setState({
        objectA: tmp,
    });
}

详细说明使用

Object.assign执行此操作的正确方法。。此函数获取所有参数并将它们合并到第一个元素中。因此，通过提供一个新对象作为第一个参数，您已经使用新属性创建了第一个对象的副本

Object.assign({}) // = {} 
Object.assign({}, objectA) // = copy of objectA
Object.assign({}, objectA, { value: "newValue" }) // = copy of objectA with 'value' = 'newValue'.

注意：
Object.assign（）
是浅克隆，而不是深克隆