在setTimeout中更新状态(React & React-Native)

Question

我正在尝试实现的目标是更新 state并基于JavaScript的计时器再次更新相同的状态。

我无法实现这一目标的原因似乎是react.js中的 state的本质。

这是我实验的片段...

render() {
    if (this.props.hasError) {
        setTimeout(function(){this.setState({showWarning: true}); }.bind(this), 3000);
    }
    return (
      <View>
        <Blah warning={this.state.showWarning} />
      </View>
    );
}

因此，目的是更改only just a few seconds if there is a specific props provided的状态。

这种方法似乎达到了更新状态的限制，如果this.props.hasError的更新过于更新。

道歉，如果这个问题太基本。任何建议都将不胜感激。

Answer 1

您不应在render（）函数中更新状态。如果这样做，您最终将陷入无限循环，这就是为什么您会遇到错误的原因。您需要使用：

componentWillReceiveProps(nextProps){
    if (this.nextProps.hasError) {
        setTimeout(function(){this.setState({showWarning: true}); }.bind(this), 3000);
    }
}

这应该解决您的问题。

Answer 2

您正在使用函数内部超时，这将更改其范围使用arrow函数

顺便说一句，我已经相应地修改了您的代码

componentWillReceiveProps(nextProps) {
    if(nextProps.hasError != this.props.hasError){
        this.setState({
            showWarning:nextProps.hasError 
        });
        setTimeout(()=> {
            this.setState({
                showWarning:!this.props.showWarning
            });
        }, 3000);
    }
}

render() {
    return (
      <View>
        {this.state.showWarning?<Blah warning={this.state.showWarning} />:null}
      </View>
    );
}

Answer 3

有两个目的。一种是改变此背景颜色 组件持续3秒钟，另一个是显示一条消息，这是 位于（再次，3秒）

中

由于您只希望这些更改显示3秒钟，因此必须先设置它们，然后使用Settimeout 3秒钟后将状态设置为相对。

从您的代码来判断，this.props.hasError是布尔值，因此我们最初可以将showWarning设置为：

constructor(props){
  super(props);
  this.state = {showWarning: this.props.hasError}
}

当组件呈现时，它将显示当前状态，三秒钟后，我们将更改状态：

componentDidMount(){
  setTimeout(() => {
    this.setState({showWarning: false});
  }, 3000);
}