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

时间:2017-12-05 07:42:01

标签: javascript reactjs react-native

我尝试实现的目标是更新root@0016c0672bc4:/universal-recommender-0.6.0# pio build --verbose SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/PredictionIO-0.11.0- incubating/lib/spark/pio-data-hdfs-assembly-0.11.0- incubating.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: Found binding in [jar:file:/PredictionIO-0.11.0- incubating/lib/pio-assembly-0.11.0- incubating.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation. SLF4J: Actual binding is of type [org.slf4j.impl.Log4jLoggerFactory] [INFO] [Engine$] Using command '/PredictionIO-0.11.0- incubating/sbt/sbt' at /universal-recommender-0.6.0 to build. [INFO] [Engine$] If the path above is incorrect, this process will fail. [INFO] [Engine$] Uber JAR disabled, but current working directory does not look like an engine project directory. Please delete lib/pio- assembly-0.11.0-incubating.jar manually. [INFO] [Engine$] Going to run: /PredictionIO-0.11.0-incubating/sbt/sbt package assemblyPackageDependency in /universal-recommender-0.6.0 [INFO] [Engine$] [info] Loading project definition from /universal- recommender-0.6.0/project [INFO] [Engine$] [info] Updating {file:/universal-recommender- 0.6.0/project/}universal-recommender-0-6-0-build... [INFO] [Engine$] [info] Resolving org.scalariform#sbt- scalariform;1.6.0 ... [info] Resolving org.scalariform#sbt-scalariform;1.6.0 ... 并根据Javascript的计时器再次更新相同的状态。

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

以下是我的实验片段......

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过于频繁地更新,这种方法似乎达到了更新状态的极限。

如果这个问题太基础,请道歉。 任何建议将不胜感激。

3 个答案:

答案 0 :(得分:6)

您不应该在render()函数中更新状态。如果你这样做,你将最终陷入无限循环,这就是你得到那个错误的原因。你需要使用:

git diff utils.py

这可以解决您的问题。

答案 1 :(得分:2)

你正在使用函数内部超时这将改变其范围使用arow函数

顺便说一下,我相应地修改了你的代码

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

答案 2 :(得分:1)

There are two purposes. One is to change the background color of this component 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 component renders, it will show the current state and after 3 seconds, we will change the state:

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