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

Question

我正在尝试做这个ReactJS教程的第15步: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开发工具的控制台中收到以下错误:

在现有状态转换期间无法更新(例如在内部render或另一个组件的构造函数中).渲染方法应该是道具和状态的纯函数; 构造函数的副作用是反模式,但可以移动到componentWillMount.

这是一个JSbin演示.为什么我的解决方案不起作用？这个错误意味着什么？

Answer 1

您的解决方案确实有效,因为它在逻辑上没有意义.您收到的错误可能有点模糊,所以让我分解一下.第一行说明:

在现有状态转换期间无法更新(例如在render或其他组件的构造函数中).

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

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

Answer 2

确保您使用正确的表达方式。例如，使用：

<View onPress={this.props.navigation.navigate('Page1')} />

与

<View onPress={ () => this.props.navigation.navigate('Page1')} />

或者

<View onPress={ () => {
    this.props.navigation.navigate('Page1')
}} />

上面最后两个是函数表达式，第一个不是。确保将函数对象传递给函数表达式() => {}