Реагировать, изменяю ли я свое состояние, если это не объект или массив?

Я знаю, как избежать изменения объектов и массивов в состоянии реакции, но я не уверен в переменных, которые не являются объектами и массивами, как в этом примере.

 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;, вы бы изменили объект состояния.

Tholle 09.08.2018 12:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
48
4

Ответы 4

Вы можете изменять состояние, действуя только непосредственно на 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))

Другие вопросы по теме