javascript - Updating state within setTimeout (React & React-Native) - Stack Overflow

admin管理员组

文章数量:1290551

What I've been trying to achieve are to update state and to update the same state again, based on Javascript's timer.

The reason why I can't achieve this seems to be the nature of state in React.js.

Here is a snippet of my experimentation...

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

So, the objective is to change state for only just a few seconds if there is a specific props provided.

This approach seems to hit the limit of updating states, if this.props.hasError gets updated too frequently.

Apologies if this question is too basic. Any suggestion will be appreciated.

What I've been trying to achieve are to update state and to update the same state again, based on Javascript's timer.

The reason why I can't achieve this seems to be the nature of state in React.js.

Here is a snippet of my experimentation...

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

So, the objective is to change state for only just a few seconds if there is a specific props provided.

This approach seems to hit the limit of updating states, if this.props.hasError gets updated too frequently.

Apologies if this question is too basic. Any suggestion will be appreciated.

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Dec 5, 2017 at 7:42 HirokiHiroki 4,1831414 gold badges5858 silver badges9696 bronze badges 2

• What are you really trying to achieve with this? – JJJ Commented Dec 5, 2017 at 7:56
• @JosanIracheta There are two purposes. One is to change the background color of this ponent for 3 seconds, the other is to show a message, which is located in <Blah /> (again, for 3 seconds). – Hiroki Commented Dec 5, 2017 at 22:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You shouldn't update your state in render() function. If you do so, you will end up in an infinite loop, that's why you got that error. You need to use:

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

This should resolve your issue.

you are using function inside timeout this will change its scope use arow function

btw i have modify your code accordingly

ponentWillReceiveProps(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>
    );
}

There are two purposes. One is to change the background color of this ponent for 3 seconds, the other is to show a message, which is located in (again, for 3 seconds)

Since you only want these changes to show for 3 seconds, you have to set them first, and then set the state to its opposite after 3 seconds using setTimeout.

Judging from your code, this.props.hasError is a boolean so we can set showWarning with that initially:

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

When the ponent renders, it will show the current state and after 3 seconds, we will change the state:

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

本文标签： javascriptUpdating state within setTimeout (React amp ReactNative)Stack Overflow