在React中如何在.map()内调用ASYNC函数来填充表格数据？

你当前的写法无法正常拿到异步结果，因为JSX是同步渲染逻辑，直接在渲染处定义执行async函数只会返回Promise对象，无法渲染出实际的接口返回值，同时还会导致组件每次重渲染都重复触发接口请求，存在严重性能问题。

正确实现思路 #

把异步请求逻辑从渲染流程中抽离，用状态管理异步请求的结果、加载、错误状态，在useEffect中触发请求：

1. 单独维护一个状态存储所有商品对应的实时价格、加载状态、错误状态
2. 监听表格数据源的变化，批量触发所有商品的价格查询请求，更新状态
3. 渲染时直接从状态中取值，同时补充加载中、请求失败的兜底展示

参考代码 #

import { useState, useEffect } from 'react';

function PriceTable() {
  // 原表格数据源，可根据实际场景替换为props传入/其他接口返回
  const [tableInfo, setTableInfo] = useState([]);
  // 实时价格状态，结构：{ [商品名称]: { loading: 布尔值, price: 数值|null, error: 布尔值 } }
  const [currentPrices, setCurrentPrices] = useState({});

  // 表格数据源变化时触发价格查询
  useEffect(() => {
    if (!tableInfo.length) return;

    const fetchAllPrices = async () => {
      // 初始化所有商品的加载状态，避免重复请求
      const initLoadState = tableInfo.reduce((acc, item) => {
        acc[item.name] = { loading: true, price: null, error: false };
        return acc;
      }, {});
      setCurrentPrices(initLoadState);

      // 遍历查询所有商品价格，也可改用Promise.all并行请求，根据后端并发支持调整
      for (const item of tableInfo) {
        try {
          const resPrice = await fetchCurrentPrice.getPrice(item.name);
          setCurrentPrices(prev => ({
            ...prev,
            [item.name]: { loading: false, price: resPrice, error: false }
          }));
        } catch (e) {
          setCurrentPrices(prev => ({
            ...prev,
            [item.name]: { loading: false, price: null, error: true }
          }));
        }
      }
    };

    fetchAllPrices();
  }, [tableInfo]);

  return (
    <table>
      <tbody>
        {tableInfo.map(info => {
          const priceState = currentPrices[info.name] || {};
          // 注意：key需要绑定在map返回的根元素tr上，不要绑定在td上
          return (
            <tr key={info.name}>
              <td>{info.name}</td>
              <td>{info.price}</td>
              <td>{info.amount}</td>
              <td>
                {priceState.loading ? '查询中' : 
                 priceState.error ? '获取失败' : 
                 priceState.price}
              </td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

补充优化点 #

• 如果需要定时刷新最新价格，可以在useEffect中新增定时器，定期执行价格查询逻辑
• 表格数据量大的情况下，建议增加分页、防抖逻辑，避免一次性请求过多接口导致后端限流
• 如果多个页面都需要查询实时价格，可以把这部分逻辑封装为自定义Hook复用

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