如果它不是对象或数组，我是否会改变我的状态？答案

【问题标题】：react am I mutating my state in case it is not an object or array?如果它不是对象或数组，我是否会改变我的状态？
【发布时间】：2019-01-16 18:59:18
【问题描述】：

我知道如何避免在反应状态下改变对象和数组，但我不确定像这个例子中不是对象和数组的变量

 this.state = {
        cubeNumber: 0,
    }

onNumberChange = (event) => {
    this.setState({ [event.target.name]: event.target.value })
}

cubeArrayRender = () => {
    let { cubeNumber } = this.state;

我是不是像这样使用 parseInt 来改变状态？

    let cubes = parseInt(cubeNumber, 10);

或者如果我这样写？

let cubes = cubeNumber;
cubes = 2;

如果我正在变异状态，我该如何避免它？

【问题讨论】：

不，你没有改变状态。如果你写了this.state.cubeNumber = 2;，你将改变状态对象。

标签： reactjs state setstate

【解决方案1】：

根据 React documentation 你不应该像这样分配状态 // Wrong this.state.comment = 'Hello'; 但只有这个： // Correct this.setState({comment: 'Hello'}); 所以是的，你的代码中没有改变状态:)

【讨论】：

【解决方案2】：

您只能直接作用于 this.state 或通过 setState 改变状态。

【讨论】：

【解决方案3】：

通过使用示例中显示的方法，您不会改变状态（或任何东西）。 parseInt 返回一个 Integer 并且不会修改您给它的字符串/数字，而是创建一个新实例。

【讨论】：

【解决方案4】：

根据@Steve Vaughan 的回答。在这种情况下，您不会改变状态，因为状态您用于此测试的是值类型。但是对象是引用类型。当你分配 cubeNumber 到新变量 cube 进行深层复制。但是对象就不一样了，你只是在传递引用。

例如：

//intial state
this.state = {
    user: {name:"sarath"},
    age:25
}

let age=this.state.age; //deep copy
age=35; // this not going affect the original state

let user=this.state.user //Shallow copy 
user.name="kumar" //It mutates the original object also

输出：
原始年龄：25
新时代：35
名称：库马尔
新名称：库马尔

你可以通过两种方法避免突变

对象分配

此方法用于将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。

let user= Object.Assign({},this.state.user); //deep copy of values user.name="kumar"; // Here the original state is untouched.
整个对象的深度克隆

Object.Assign 仅复制属性值。它不会复制对象内部的引用。

例如：

//intial state
this.state = {
    user: {name:"sarath",interest:{music:"western",sports:"foot ball"},
    age:25
}

let user=Object.Assign({},this.state.user);
user.name="Jasrin"; 
user.interest.sports="cricket";

console.log(this.state.user.name); //sarath
console.log(user.name); //kumar
console.log(this.state.user.interest.sports); //cricket
console.log(this.state.user.interest.sports); //cricket

进行深度克隆的另一种方法是

let user=JSON.parse(JSON.stringify(this.state.user))

【讨论】：