如何从Promise获取值并在React列表渲染中使用？

你的问题核心是异步代码的执行顺序错误：getProductDetails是异步请求（返回Promise），你写的getProdcutName函数在Promise完成前就返回了初始的productName变量（此时还是undefined），自然拿不到正确的产品名称。

下面是两种可行的解决方式：

方式一：批量获取并缓存产品名称（推荐） #

用React状态存储已获取的产品名称，既避免重复请求，又能保证渲染时拿到有效值：

1. 在组件中添加状态存储产品名称映射：

import { useState, useEffect } from 'react';

// 其他组件代码...
const [productNames, setProductNames] = useState({});

2. 编写异步函数获取并缓存产品名称：

const fetchProductName = async (productId) => {
  // 已缓存则直接返回，避免重复请求
  if (productNames[productId]) return;
  
  try {
    const response = await getProductDetails(productId);
    setProductNames(prevState => ({
      ...prevState,
      [productId]: response.data.name
    }));
  } catch (err) {
    console.error('获取产品名称失败:', err);
    // 请求失败时显示默认值
    setProductNames(prevState => ({
      ...prevState,
      [productId]: '未知产品'
    }));
  }
};

3. 在购物车数据变化时，批量获取所有需要的产品名称：

useEffect(() => {
  item.cartItems.forEach(cartItem => {
    fetchProductName(cartItem.product);
  });
}, [item.cartItems]); // 购物车数据变化时重新执行

4. 表格中直接渲染缓存的产品名称：

<tbody>
  {item.cartItems.map((cartItem, index) => (
    <tr key={cartItem._id}>
      <th scope="row">{index + 1}</th>
      <th>
        <img 
          src={`${API}/product/photo/${cartItem.product}`} 
          alt={productNames[cartItem.product] || '产品图片'} 
          width="60px" 
          height="50px" 
        />
      </th>
      <td>{productNames[cartItem.product] || '加载中...'}</td>
      <td align="center">{cartItem.count}</td>
      <td align="center">৳ {cartItem.price * cartItem.count}</td>
    </tr>
  ))}
</tbody>

方式二：单独封装异步组件 #

如果不想批量处理，也可以为产品名称单独写一个异步组件，处理加载状态：

1. 创建产品名称组件：

const ProductName = ({ productId }) => {
  const [name, setName] = useState(null);
  
  useEffect(() => {
    getProductDetails(productId)
      .then(res => setName(res.data.name))
      .catch(() => setName('未知产品'));
  }, [productId]);
  
  if (!name) return <span>加载中...</span>;
  return <span>{name}</span>;
};

2. 在表格中使用：

<td><ProductName productId={cartItem.product} /></td>

另外注意你的函数拼写错误：getProdcutName应该是getProductName（少了字母u）。

内容的提问来源于stack exchange，提问作者Sifat Hasan Wakib