Question

我知道如何避免在反应状态下使对象和数组发生变异，但是我不确定像此示例那样不是对象和数组的变量

 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;

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 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
   名称：Kumar
   新名称：Kumar

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

对象分配

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

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))

如果不是对象或数组，我会改变状态吗？

4 个答案: