setInterval方法有什么问题？

Question

我正在设计一个移动应用程序中的屏幕，该屏幕应该会自动消失并导航到下一个屏幕。为此，我在以下代码中使用setInterval：

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

isLoaded状态变量方法应该变为true，因此，屏幕必须消失。但不会发生，并且屏幕仍然存在。 知道有什么问题吗？

Answer 1

这是因为在调用setInterval setState时，它将重新渲染组件，但它们没有调用componentDidMout。

对于本机> 0.6：

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

对于本机<0.6：

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

我建议您使用componentDidUpdate来满足您的条件。因为getDerivedStateFromProps是静态的。它不能调用this.props.navigation

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

Answer 2

问题是，您正在呼叫

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

在componentDIdMount内部，因此它始终为false，即使setState重新渲染它并使其处于isLoadedTrue状态，​​但根据react的生命周期方法却没有调用componentDidMount。因此该条件不再被调用。 / p>

您可以尝试在componentDidUpdate（）中编写特定代码。

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

还有另一件事，而不是setInterval尝试使用setTimeout，因为您的情况就足够了。并在componentDidMount内部使用setTimeout。您的逻辑很好，只需将导航逻辑放入comopnentDidUpdate()