时间戳

首页 > 解决方案 > 在 React ComponentDidUpdate 中使用 SetInterval

reactjs - 在 React ComponentDidUpdate 中使用 SetInterval

问题描述

在使用 setInterval 引入反应类 componentDidUpdate 时有点挣扎

我的代码看起来像这样

 componentDidUpdate = prevProps => {
    const data = this.props.fullData;
    if (prevProps.fullData !== this.props.fullData) {
      this.setState({
        mediaAllData: data.ALL ? data.ALL : [],
      });

      const wholeAssets = data.ALL ? data.ALL : [];
      const assetsWithIncomplete = wholeAssets.filter(
        i => i.status === '6',
      );
      if(assetsWithIncomplete.length>0){
         // need to call api with list of id's whose status is 6. Here for example [1,2,3]
    }

此代码将在初始页面加载时工作如果 WholeAssets 长度大于 0，我需要调用 API 并检查单个数据的状态。通常在 7 秒后，它会更新状态。那么我如何使用 ComponentDidUpdate 中的 setInterval 进行检查。如果没有单个数据的状态为 6，则api 应该停止触发 api。

标签： reactjsreact-redux

解决方案

我们可以做这样的事情吗>：

if(assetsWithIncomplete.length>0){

  let setIntervaId = setInterval(()=>{
    //setup a state in your reducer with myDataSetComplete: false, and set it up in
    //your set state to props as well
    if(this.props.myDataSetComplete){
      clearInterval(setIntervaId)
    }else{
      //Set up in map dispatch to props
      this.props.CallAnotherAPIToCompleteMyDataset(val);
    }

  }, 7000)
}

const mapStateToProps = state => {

  return {
    .....,
    myDataSetComplete: state.myDataSetComplete
  };
};

const mapDispachToProps = (dispatch, props) => {
  return {
    .....,
   CallAnotherAPIToCompleteMyDataset: (val) => dispatch(actionCreators.CallAnotherAPIToCompleteMyDataset(val)),
  };
};

减速器

const initialState = {
    .....,
    myDataSetComplete: false
};

推荐阅读