代码之家 › 专栏 › 技术社区 › Nhat

如果我的状态不是一个对象或数组,我会改变它吗?

setstate state reactjs

1

Nhat · 技术社区 · 6 年前

我知道如何避免在react状态下改变对象和数组,但我不确定变量是否与本例中的对象和数组不同

 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;

如果我是变异状态,我怎么能避免它呢?

4 回复 | 直到 6 年前

1

2

Sangsom 6 年前

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

2

1

Mosè Raguzzini 6 年前

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

3

1

Steve Vaughan 6 年前

parseInt 返回一个整数,不修改您给它的字符串/数字,而是创建一个新实例。

4

0

Sarath Kumar 6 年前

根据史蒂夫·沃恩的回答。在这种情况下,你不会改变状态,因为您用于此测试的是值类型。但对象是引用类型。当你分配这个 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

输出:

新年龄: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))