“在现有状态转换期间无法更新” React中的错误 [英] "Cannot update during an existing state transition" error in React

问题描述

我正在尝试执行此ReactJS教程的第15步： React.js简介适用于知道jQuery足够jQuery的人

I'm trying to do Step 15 of this ReactJS tutorial: React.js Introduction For People Who Know Just Enough jQuery To Get By

作者推荐以下：

overflowAlert: function() {
  if (this.remainingCharacters() < 0) {
    return (
      <div className="alert alert-warning">
        <strong>Oops! Too Long:</strong>
      </div>
    );
  } else {
    return "";
  }
},

render() {
  ...

  { this.overflowAlert() }

  ...
}

我尝试过以下操作（看起来不错我）：

I tried doing the following (which looks alright to me):

// 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开发工具中控制台中的错误：

And I received the following error in the console in Chrome Dev Tools:

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

Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

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

Here's a JSbin demo. Why won't my solution work and what does this error mean?

推荐答案

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

Your solution does work because it doesn't make sense logically. The error you receive may be a bit vague, so let me break it down. The first line states:

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

Cannot update during an existing state transition (such as within render or another component's constructor).

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

Whenever a React Component's state is updated, the component is rerendered to the DOM. In this case, there's an error because you are attempting to call overflowAlert inside render, which calls setState. That means you are attempting to update state in render which will in then call render and overflowAlert and update state and call render again, etc. leading to an infinite loop. The error is telling you that you are trying to update state as a consequence of updating state in the first place, leading to a loop. This is why this is not allowed.

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

Instead, take another approach and remember what you're trying to accomplish. Are you attempting to give a warning to the user when they input text? If that's the case, set overflowAlert as an event handler of an input. That way, state will be updated when an input event happens, and the component will be rerendered.

这篇关于“在现有状态转换期间无法更新” React中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！