Почему это считается мутирующим состоянием?

Question

handleClick(event) {
let value = event.target.value;

this.setState({ question: (this.state.question += value) });

Я получаю предупреждение:

Не изменять состояние напрямую. Используйте setState () не реагирует / не прямая мутация состояние

если я попытаюсь загрузить страницу с этим кодом.
Как я могу это исправить, чтобы оно не давало мне это предупреждение?
Он говорит использовать this.setState, но это то, что я делаю.

Answer 1

Вы делаете ненужное добавление назначения к this.state.question - здесь вам нужно только добавить. Кроме того, при обновлении состояния на основе предыдущего значения, состояние документов :

React может объединять несколько вызовов setState () в одно обновление для повышения производительности. Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния.

Правильный способ обновить состояние на основе предыдущего значения - передать функцию обновления, которая работает с предыдущим значением, т. Е .:

this.setState(prevState => ({ question: prevState.question + value }));

Answer 2

Это считается изменяющимся состоянием, потому что вы присваиваете значение this.state.question в выражении (this.state.question += value). Я вставил ссылку на изолированную программную среду кода, которую можно просмотреть, чтобы увидеть, как правильно реализовать это поведение.

Код Песочница

Answer 3

Ошибка здесь:

this.state.question += value

+ = - оператор, используемый для добавления правого операнда в левый операнд. Вы пытаетесь добавить значение this.state.question.

Правильный способ сделать это:

this.setState(previousState => ({ question: previousState.question + value }));