如何通过并行独立API调用更新状态中的两个字段

你的问题出在两个API的回调里，更新状态时用的是调用函数那一刻的nwla快照，而非组件当前的最新状态。不管哪个API先返回，后执行的回调都会把前一次的更新覆盖掉——因为它始终基于旧的状态对象进行扩展。

解决方案：使用函数式状态更新 #

React的状态更新函数（包括Hook里的setXxx）支持传入一个函数，这个函数会接收当前最新的状态作为参数，你可以基于这个最新状态生成新的状态对象。这样不管异步操作的执行顺序如何，每次更新都是基于最新状态，不会互相覆盖。

修改后的代码如下：

const getAdjustedNetWorth = (nwla: ICombinedNWLA) => {
  onCommonGet({
    url: nwlaUrl.calculateAdjustedNetWorth(
      nwla.combinedNetWorth,
      nwla.lessEquity,
      nwla.uncalledCapitalCommitments,
      nwla.calculationOptionId
    ),
    successCallback: (data: number) => {
      console.log('Adjusted Net Worth: ' + data);
      // 改用函数式更新，基于最新状态修改
      setCombinedNWLADetails(prevState => ({
        ...prevState,
        adjustedNetWorth: data
      }))
    },
    recordType: 'Adjusted Net Worth'
  })
};

const getAdjustedLiquidAssets = (nwla: ICombinedNWLA) => {
  onCommonGet({
    url: nwlaUrl.calculateAdjustedLiquidAssets(
      nwla.combinedLiquidAssets,
      nwla.lessEquity,
      nwla.uncalledCapitalCommitments,
      nwla.calculationOptionId
    ),
    successCallback: (data: number) => {
      console.log('Adjusted Liquid Assets: ' + data);
      // 同样改用函数式更新
      setCombinedNWLADetails(prevState => ({
        ...prevState,
        adjustedLiquidAssets: data
      }))
    },
    recordType: 'Adjusted Liquid Assets'
  })
};

原理说明 #

用函数式更新时，React会保证每次调用这个函数时，传入的prevState都是当前组件的最新状态。不管两个API的返回顺序如何，第一个更新会基于初始状态修改对应字段，第二个更新则会基于第一个更新后的状态修改另一个字段，两个字段的更新都会被保留，不会出现覆盖问题。

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