Я читаю Forms раздел reactjs и просто попробовал этот код, чтобы продемонстрировать использование onChange
(JSBIN).
var React= require('react');
var ControlledForm= React.createClass({
getInitialState: function() {
return {
value: "initial value"
};
},
handleChange: function(event) {
console.log(this.state.value);
this.setState({value: event.target.value});
console.log(this.state.value);
},
render: function() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange}/>
);
}
});
React.render(
<ControlledForm/>,
document.getElementById('mount')
);
Когда я обновляю значение <input/>
в браузере, второй console.log
внутри обратного вызова handleChange
печатает тот же value
как первый console.log
, почему я не вижу результат this.setState({value: event.target.value})
в рамках handleChange
обратного вызова?
Из React документация:
setState()
не сразу мутируетthis.state
, а создает ожидающий переход состояния. Доступ кthis.state
после вызова этого метод может потенциально вернуть существующее значение. Здесь нет гарантия синхронной работы вызовов наsetState
и вызовы могут быть собраны для повышения производительности.
Если вы хотите, чтобы функция выполнялась после изменения состояния, передайте ее в качестве обратного вызова.
this.setState({value: event.target.value}, function () {
console.log(this.state.value);
});
Как упоминалось в документации React, нет гарантии, что setState
будет запущен синхронно, поэтому ваш console.log
может вернуть состояние до его обновления.
setState
. Другим способом обработки логики после изменения состояния является метод componentDidUpdate
lifecycle, который является методом, рекомендованным в документах React.
Обычно мы рекомендуем использовать для этой логики componentDidUpdate().
Это особенно полезно, когда может быть последовательный setState
запущен, и вы хотели бы запустить ту же функцию после каждого изменения состояния. Вместо добавления обратного вызова для каждого setState
, вы можете поместить функцию внутри componentDidUpdate
, при необходимости используя определенную логику.
// example
componentDidUpdate(prevProps, prevState) {
if (this.state.value > prevState.value) {
this.foo();
}
}
Здесь React docs говорят:
НИКОГДА не мутируйте this.state напрямую, так как вызов setState() впоследствии может заменить мутацию, которую вы сделали. Относитесь к this.state как к неизменному.
setState() не сразу мутирует this.state, но создает состояние ожидания переход. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.
Нет гарантии синхронной работы вызовов setState и вызовов могут быть собраны для повышения производительности. setState() всегда вызывает повторную рендеринг, если логика условного воспроизведения не реализована в shouldComponentUpdate().
Если используются изменяемые объекты, и логика не может быть реализована в shouldComponentUpdate(), вызывающий setState() только тогда, когда новое состояние отличается из предыдущего состояния избежит ненужных повторных рендерингов.
Ну, так глупые soloution, но, возможно, это может помочь кому-то, кто не знаком с резервами. В моем случае я решил проблему, используя временную переменную.
У меня есть тест для пользователя, и я вычисляю количество правильных ответов на вопросы, сохраняя их до состояния теста, и после ответа на последний вопрос мне сразу нужно отобразить количество правильных ответов от состояния. Однако государство возвращало старую ценность. Поэтому я сделал это:
const numberOfCorrectQuestionsTemp = this.state.numberOfCorrectQuestions;
if (questionCorrect) {
numberOfCorrectQuestionsTemp++;
}
this.setState({
numberOfCorrectQuestions: numberOfCorrectQuestionsTemp,
});
if (isLastQuestion) {
// display the result in percentage - with actual new value
alert((100 / (this.state.numberOfQuestions)) * numberOfCorrectQuestionsTemp + '%');
}
Но лучшим решением сделать что-то после асинхронного действия является использование обратного вызова. Вы можете найти его здесь: Когда использовать обратный вызов React setState
componentDidUpdate
. Он будет вызван после изменения состояния.