Question

我正在尝试执行此ReactJS教程的第15步：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() }

  ...
}

我尝试了以下操作（看起来对我来说没问题）：

// 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 demo。为什么我的解决方案不起作用？这个错误意味着什么？

Answer 1

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

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

每当更新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')
}} />

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

Answer 3

在更新组件后，不要在render方法中执行任何与组件相关的任务在这种情况下，只有在componentDidMount方法调用之后才能从Splash屏幕移动到另一个屏幕。

setDamageClaimReceiptNr

Answer 4

每次将组件prop称为新的渲染活动。在单个渲染器溢出时发生警告。

instead of
<Item onPress = { props.navigation.toggleDrawer() } />
try like
<Item onPress = {() =>  props.navigation.toggleDrawer() } />

Answer 5

您也可以将函数overflowAlert: function()定义为变量，并且不会在渲染中立即调用

overflowAlert = ()=>{//.....//}

React

5 个答案: