React：如何防止 ComponentDidMount 和 ComponentDidUpdate 中的 api 调用相互覆盖答案

【问题标题】：React: how to prevent api calls in ComponentDidMount and in ComponentDidUpdate override each otherReact：如何防止 ComponentDidMount 和 ComponentDidUpdate 中的 api 调用相互覆盖
【发布时间】：2020-01-12 05:39:18
【问题描述】：

在componentDidMount 中，我正在使用Redux 操作获取数据，例如：

componentDidMount() {
   let parameter = some code;
   this.props.getAction(parameter).then(r => {
     if(r.type.endsWith('SUCCESS')){
       this.setState({cList: r.payload.data.data})
     }
   }
}

然后，在componentDidUpdate我需要再次获取数据，当函数内部的参数发生变化时（我正在使用lodash）：

componentDidUpdate(prevProps, prevState){
   if(!isEqual(this.props.parameter, prevProps.parameter){
     let parameter = some code;
     if(r.type.endsWith('SUCCESS')){
       this.setState({cList: r.payload.data.data})
     }
   }
}

问题是如果componentDidUpdate中的Promise在componentDidMount中的Promise之前返回结果，当我在组件中更改我的参数时，显示的数据是错误的；它仍然显示来自componentDidMount 的数据，而不是来自componentDidUpdate 中的新操作调用的数据。

我希望一切都清楚。

我怎样才能避免这种情况？谢谢。

【问题讨论】：

CDU 不为初始渲染调用，所以想知道它与 CDM 有何冲突？
您能为此创建一个代码沙盒或代码笔吗？在没有安装组件的情况下如何更改您的参数？

标签： javascript reactjs race-condition lifecycle fetch-api

【解决方案1】：

您可以在组件中保留一个实例变量 lastRequestId 来跟踪正在运行的承诺，如下所示：

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.lastRequestId = null;
  }

  componentDidMount() {
    let parameter = "some code";
    this.lastRequestId = 'ON_MOUNT_REQUEST';
    this.props.getAction(parameter).then(r => {
      if(r.type.endsWith('SUCCESS') && this.lastRequestId === 'ON_MOUNT_REQUEST'){
        this.setState({cList: r.payload.data.data})
      }
    })
  } 

  componentDidUpdate(prevProps, prevState){
    if(!isEqual(this.props.parameter, prevProps.parameter)) {
      let parameter = "some code";
      this.lastRequestId = 'ON_UPDATE_REQUEST';
      this.props.getAction(parameter).then(r => {
        if(r.type.endsWith('SUCCESS') && this.lastRequestId === 'ON_UPDATE_REQUEST'){
          this.setState({cList: r.payload.data.data})
        }
      })
    }
  }
}

【讨论】：