Я пытаюсь сделать шаг 15 этого учебника ReactJS: React.js Введение для людей, которые знают, что достаточно JQuery для получения информации
Автор рекомендует следующее:
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
return (
<div className="alert alert-warning">
<strong>Oops! Too Long:</strong>
</div>
);
} else {
return "";
}
},
render() {
...
{ this.overflowAlert() }
...
}
Я пробовал сделать следующее (что выглядит хорошо для меня):
// initialized "warnText" inside "getInitialState"
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
this.setState({ warnText: "Oops! Too Long:" });
} else {
this.setState({ warnText: "" });
}
},
render() {
...
{ this.overflowAlert() }
<div>{this.state.warnText}</div>
...
}
И я получил следующую ошибку в консоли в Chrome Dev Tools:
Невозможно обновить во время существующего перехода состояния (например, внутри
render
или другого конструктора компонента). Методы визуализации должны быть чистая функция реквизита и состояния; побочные эффекты конструктора anti-pattern, но может быть перенесен наcomponentWillMount
.
Здесь JSbin demo. Почему мое решение не работает и что означает эта ошибка?