setInterval 方法有什么问题？

Question

I'm designing a screen in a mobile app that is supposed to disappear automatically and navigate to the next screen. for that purpose I'm using setInterval in following code :

componentDidMount(){
      Animated.timing(this.state.AnimVal, {
          toValue: 1,
          duration: 500 ,
          delay: 1000,
          useNativeDriver: true,
      }).start();

      var timer = setInterval( () => {
        this.setState({
          isLoaded: true,
        });
      }, 1000);
      if(this.state.isLoaded){
        this.props.navigation.navigate({ routeName: 'Guideline'})
      };
  };

the isLoaded state variable method is supposed to become true and as a result of it, the screen must disappear. but it does not happen and the screen remains. any idea what's wrong with it?

Answer 1

this is because when the setInterval setState called, it will re-render the component, but they don not called componentDidMout.

for react-native > 0.6:

static getDerivedStateFromProps(props, state){
if(state.isLoaded){
        //here may be has problem
        props.navigation.navigate({ routeName: 'Guideline'})
   };
}

for react-native < 0.6:

componentWillReceiveProps(nextprops){
if(this.state.isLoaded){
        this.props.navigation.navigate({ routeName: 'Guideline'})
      };
}

I suggest it use componentDidUpdate for your condition. because getDerivedStateFromProps is static. it can not call this.props.navigation

componentDidUpdate(prevProps, prevState, snapshot) {
   if(this.state.isLoaded){
        this.props.navigation.navigate({ routeName: 'Guideline'})
      };
  }

Answer 2

The problem is , you are calling the

if(this.state.isLoaded){
        this.props.navigation.navigate({ routeName: 'Guideline'})
      };

inside the componentDIdMount, so its always false, and even though setState re-renders it and makes the state of isLoadedTrue, but it doesnt call the componentDidMount as per the lifecyle methods of react.SO that condition never gets called again.

You can try to write that particular code inside componentDidUpdate() .

componentDidUpdate(){
if(this.state.isLoaded){
            this.props.navigation.navigate({ routeName: 'Guideline'})
          };
}

And one more thing, rather than setInterval try using setTimeout , coz that will suffice in your case. and use the setTimeout inside the componentDidMount itself. That logic of yours is fine, just the navigation logic put it into comopnentDidUpdate()