setInterval方法怎么了？

Posted 2021-04-10

我正在设计一个移动应用程序中的屏幕，该屏幕应该会自动消失并导航到下一个屏幕。为此，我在以下代码中使用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，因此，屏幕必须消失。但不会发生，并且屏幕仍然存在。知道有什么问题吗？

答案

问题是，您正在拨打

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

在componentDIdMount内部，因此它始终为false，即使setState重新渲染它并使其处于isLoadedTrue状态，​​但根据react.life.le方法的调用它也不会调用componentDidMount。因此，该条件不再被调用。

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

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

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

另一答案

这是因为当调用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(netprops){
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'})
      };
  }