Я знаю, как избежать изменения объектов и массивов в состоянии реакции, но я не уверен в переменных, которые не являются объектами и массивами, как в этом примере.
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 или через setState.
Согласно React документация вы не должны назначать такое состояние
// Wrong
this.state.comment = 'Hello';
Но только это:
// Correct
this.setState({comment: 'Hello'});
Так что да, вы не меняете состояние в своем коде :)
Вы не изменяете состояние (или что-то еще), используя метод, который вы показали в своем примере. parseInt
возвращает целое число и не изменяет передаваемую ему строку / число, вместо этого создает новый экземпляр.
Согласно ответу @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.info(this.state.user.name); //sarath
console.info(user.name); //kumar
console.info(this.state.user.interest.sports); //cricket
console.info(this.state.user.interest.sports); //cricket
Альтернативный способ глубокого клонирования:
let user=JSON.parse(JSON.stringify(this.state.user))
Нет, вы не изменяете состояние. Если бы вы написали
this.state.cubeNumber = 2;
, вы бы изменили объект состояния.