如何从Firestore异步获取的支付列表中正确更新求和状态

问题根源 #

你遇到的问题是因为React的setState是异步操作，且循环里的回调函数会捕获初始的amountReceive闭包值——每次更新时，你拿到的都不是最新的state，而是最初的旧值，导致多次更新互相覆盖，最终只保留最后一次计算结果。

可行解决方法 #

方法1：使用函数式更新（推荐，支持实时累加）

利用React的函数式更新特性，直接获取state的最新值进行计算，避免闭包陷阱：

fetchPaymentsInChat(props.threadID).then((payments) => {
  payments.forEach(pid => {
    fetchPayment(pid).then(payment => {
      if (payment.sender === username) {
        // 函数式更新：prevAmount是当前最新的state值
        setAmountReceive(prevAmount => prevAmount + payment.value);
      }
    });
  });
});

方法2：批量请求后一次性更新state

先等待所有异步请求完成，统一筛选求和后再更新state，减少state更新次数：

fetchPaymentsInChat(props.threadID).then(async (payments) => {
  // 批量请求所有支付详情，等待全部完成
  const paymentDetails = await Promise.all(payments.map(pid => fetchPayment(pid)));
  // 筛选符合条件的项并求和
  const total = paymentDetails
    .filter(payment => payment.sender === username)
    .reduce((sum, payment) => sum + payment.value, 0);
  // 一次性更新最终结果
  setAmountReceive(total);
});

注意事项 #

原代码中存在两次setAmountReceive调用，其中第一行setAmountReceive(payment.value + amountReceive);属于多余逻辑，会导致非目标支付项也被累加，记得删除这一行。

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