React中的“无法在现有状态转换期间更新”错误

Question

我正在尝试执行本ReactJS教程的第15步：对只了解足够的jQuery的人们的React.js简介

作者建议以下内容：

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开发者工具的控制台中收到以下错误：

在现有状态转换期间（例如在内部render或另一个组件的构造函数中）无法更新。渲染方法应该纯粹是道具和状态的函数；构造函数的副作用是反模式，但可以移至componentWillMount。

这是一个JSbin演示。为什么我的解决方案不起作用，该错误是什么意思？

Answer 1

您的解决方案不起作用，因为从逻辑上讲没有意义。您收到的错误可能有点含糊，所以让我分解一下。第一行指出：

在现有状态转换期间（例如在渲染或另一个组件的构造函数中）无法更新。

每当React
Component的状态更新时，该组件都会重新呈现到DOM。在这种情况下，会出现错误，因为您尝试在overflowAlert内部调用render，即调用setState。这意味着您尝试更新渲染中的状态，然后将调用渲染overflowAlert并更新状态并再次调用渲染，等等，从而导致无限循环。该错误告诉您由于首先要更新状态而导致尝试更新状态，从而导致循环。这就是为什么不允许这样做的原因。

相反，请采取另一种方法并记住您要完成的工作。您是否要在用户输入文本时向用户发出警告？如果是这样，请将其设置overflowAlert为输入的事件处理程序。这样，当输入事件发生时，状态将被更新，并且组件将被重新呈现。