Функциональный компонент React не выполняет рендеринг при изменении реквизита, переданного как массив
Мой функциональный компонент не перерисовывается, когда я передаю массив в качестве реквизита и меняю значения массива.
https://codesandbox.io/s/5ym4vkrnnk
или
import React, { PureComponent, Fragment } from "react";
import ReactDOM from "react-dom";
const SomeFunctionalComponent = props => {
return <span>{props.array[0]}</span>;
};
class App extends PureComponent {
state = {
array: [1, 2, 3]
};
increase = () => {
var array = this.state.array;
array[0] = array[0] + 1;
this.setState({ array: array });
console.info(this.state.array);
};
render() {
return (
<Fragment>
<button onClick = {this.increase}>Increase</button>
<SomeFunctionalComponent array = {this.state.array} />
</Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Мои вопросы:
- Почему это так?
- Как я могу это изменить?
Спасибо за любую помощь заранее!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Никогда не изменяйте состояние напрямую
вы изменяете состояние прямо в коде, поэтому изменения не отражаются. Массив становится ссылкой на this.state.array, что вызывает нежелательную мутацию.
import React, { PureComponent, Fragment } from "react";
import ReactDOM from "react-dom";
const SomeFunctionalComponent = props => {
return <span>{props.array[0]}</span>;
};
class App extends PureComponent {
state = {
array: [1, 2, 3]
};
increase = () => {
var array = [...this.state.array];
array[0] = array[0] + 1;
this.setState({ array: array });
console.info(this.state.array);
};
render() {
return (
<Fragment>
<button onClick = {this.increase}>Increase</button>
<SomeFunctionalComponent array = {this.state.array} />
</Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
можно добавить, что array становится ссылкой на this.state.array, что вызывает нежелательную мутацию
Большое спасибо, похоже, мне не хватает некоторых базовых знаний о javascript ... Я подумал, когда напишу: var array = this.state.array; массив [0] = массив [0] + 1; Я копирую значение этого .state.array в другую переменную, а затем меняю его вместо того, чтобы изменять ссылку?
Кстати, синтаксис распространения создает неглубокую копию. С этим простым кодом все в порядке, но если вы измените вложенное свойство нового массива, вы измените исходное.
@ TimvonKänel: вы используете тот же массив для внесения изменений, необходимых для создания полностью нового массива перед его изменением.
@VelimirTchatchevsky спасибо, я добавил это в ответ
@ TimvonKänel, прямое присвоение создает объект (массивы - это объекты), указывающий на одну и ту же ссылку на объект. Если вы измените свойство на новое, вы измените старое. Распространенный синтаксис, и Object.assign создает неглубокие копии, то есть они копируют только на один уровень в глубину. Итак, если вы измените вложенное свойство, вы измените старое.
Вы меняете значение в массиве, но ссылка на массив остается прежней. Поскольку
reactвидит одну и ту же ссылку на объект до и после вызоваincrease(), он фактически не знает, что что-то изменилось. Вы должны попробовать использовать чистые функции и неизменяемость.