在表格单元格中调用函数返回Promise，如何解析获取预期结果？

现有如下React代码：

let data = [223, 34, 456, 56, 67];

function getDataFromApi(paramfromTableCell){
  let postData = {data : paramfromTableCell}
  let result = apiResponse(url, 'post', postData).catch((err => console.log(err)))
  return result;
}

data.map((value)=>{
  return(
    <th>{getDataFromApi(value)}</th>
  )
})

在表格单元格中调用getDataFromApi函数时，预期该函数返回对应数字的名称，但实际返回的是Promise对象，无法直接渲染。请问如何解析Promise以获取预期结果？

解决方案 #

getDataFromApi返回的是异步Promise，React无法直接渲染Promise实例，必须等待异步请求完成后，通过状态更新触发组件重新渲染，以下是两种可行的处理方式：

1. 组件内批量请求+状态管理 #

通过useState存储所有数字对应的名称，useEffect触发批量异步请求，请求完成后更新状态：

import { useState, useEffect } from 'react';

function MyTable() {
  const [nameMap, setNameMap] = useState({});
  const data = [223, 34, 456, 56, 67];

  useEffect(() => {
    const fetchAllNames = async () => {
      // 生成所有请求的Promise数组
      const requestPromises = data.map(async (num) => {
        try {
          const name = await getDataFromApi(num);
          return { [num]: name };
        } catch (err) {
          console.error(`获取数字${num}名称失败:`, err);
          return { [num]: '获取失败' };
        }
      });

      // 等待所有请求完成，合并结果
      const results = await Promise.all(requestPromises);
      const mergedResult = results.reduce((acc, curr) => ({ ...acc, ...curr }), {});
      setNameMap(mergedResult);
    };

    fetchAllNames();
  }, []);

  return (
    <thead>
      <tr>
        {data.map((num) => (
          <th key={num}>{nameMap[num] || '加载中...'}</th>
        ))}
      </tr>
    </thead>
  );
}

// 修正原API函数：抛出错误让上层处理，避免吞掉异常
function getDataFromApi(paramfromTableCell){
  let postData = {data : paramfromTableCell}
  return apiResponse(url, 'post', postData).catch(err => {
    console.log(err);
    throw err;
  });
}

2. 封装异步子组件 #

创建独立的子组件处理单个数字的请求和渲染，每个组件单独管理自身的异步状态：

import { useState, useEffect } from 'react';

function NumberNameCell({ num }) {
  const [name, setName] = useState('加载中...');

  useEffect(() => {
    const fetchName = async () => {
      try {
        const result = await getDataFromApi(num);
        setName(result);
      } catch (err) {
        console.error(`获取数字${num}名称失败:`, err);
        setName('获取失败');
      }
    };

    fetchName();
  }, [num]);

  return <th>{name}</th>;
}

// 父组件中使用子组件
function MyTable() {
  const data = [223, 34, 456, 56, 67];

  return (
    <thead>
      <tr>
        {data.map((num) => (
          <NumberNameCell key={num} num={num} />
        ))}
      </tr>
    </thead>
  );
}

// 修正原API函数
function getDataFromApi(paramfromTableCell){
  let postData = {data : paramfromTableCell}
  return apiResponse(url, 'post', postData).catch(err => {
    console.log(err);
    throw err;
  });
}

核心说明 #

• 必须通过async/await或.then()等待Promise状态变为resolved，才能拿到实际返回值
• 直接在map中调用异步函数会返回Promise对象，React无法识别，必须通过状态更新触发组件重新渲染
• 增加错误处理逻辑，避免单个请求失败导致整体渲染异常，同时给用户展示友好提示

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