React组件中.then外访问state变量retrievedmrnNumber返回null如何解决

• 异步请求执行顺序问题：你调用的axios.get('api/Hospitalses/'+hospitalIdtoRetrieveMRNNumber)是异步网络请求，JS不会等它返回结果再往下走，所以.then外面的打印和selectedHospitals赋值代码会先执行，这时候retrievedmrnNumber还没被赋值，自然是null。
• setState本身是异步更新的：就算你在.then里刚调用完setState就立刻打印this.state.retrievedmrnNumber，也大概率拿不到最新值，React会批量处理state更新，不会立刻生效。

推荐用async/await改写异步逻辑，保证执行顺序符合你的预期，把所有依赖MRN返回值的逻辑都移到MRN请求完成之后执行即可。改后fetchRecords代码如下：

// 把fetchRecords改成async函数
async fetchRecords() {
  let url = 'myurl'
  this.setState({
    loading: true
  });       

  try {
    // 等待第一个请求返回
    const firstResponse = await axios.get(url)
    let selectedHospitals = [];
    let retrievedmrnNumber = null;

    if(this.props.value?.[0]){
      console.log('this.props.value is DEFINED - Request has been EDITED!!!!')
      const hospitalIdtoRetrieveMRNNumber = this.props.value[0].hospitalId;
      // 等待MRN请求返回
      const mrnResponse = await axios.get('api/Hospitalses/'+hospitalIdtoRetrieveMRNNumber)
      console.log("Extracting mrnNumber from Hospitals API results")
      console.log(mrnResponse.data.mrnNumber);
      retrievedmrnNumber = mrnResponse.data.mrnNumber;
      // 这里如果需要存到state可以存，赋值selectedHospitals直接用上面的变量就行，不用等state更新
      this.setState({ retrievedmrnNumber });
      // 依赖mrn的逻辑移到这里执行
      selectedHospitals = [{label: retrievedmrnNumber || 'Select'}]
    }else {
      console.log('this.props.value is UNDEFINED - it is a NEW  REQUEST');
    }

    if (this.props.value) {
      this.props.value.forEach(e => {
        const matchedHospital = firstResponse.data._embedded.Hospitalses.find(hospitalSet => hospitalSet.hospitalId === e.hospitalId)
        if(matchedHospital) selectedHospitals.push(matchedHospital)
      })
    }

    this.setState({
      loading: false,
      selectedHospitals: firstResponse.data._embedded.Hospitalses.map(item => ({
        label: item.mrnNumber.toString(),
        projectTitle: item.projectTitle,
        hospitalId: item.hospitalId,
      })),                    
      selectedHospitalsValues: selectedHospitals
    });
  } catch (err) {
    console.log(err)
    this.setState({ loading: false })
  }
}

如果你一定要在.then外的其他地方（比如render里）用this.state.retrievedmrnNumber，只要做好空值判断就行，state更新后组件会自动重新渲染，值也会自动更新。

内容的提问来源于stack exchange，提问作者Tan