React中对数组使用.map方法为何无法渲染接口返回的列表项？

你代码的核心问题是异步请求拿到的商品数据没有存入组件的响应式状态，无法触发组件重渲染，具体分两点：

• getProducts是异步函数，调用后返回的是Promise对象，你没有await获取实际返回的商品数组，也没有将结果存入useState触发组件更新。你在控制台打印的getProducts()实际上是Promise实例，不是真实接口返回的数组，你误以为数据已经拿到可以用了。
• 当前组件的渲染依赖传入的products属性，而props是只读的，你在组件内调用接口拿到的数据无法修改传入的props值，只要父组件传入的products一直是空数组，列表永远不会渲染。

提供两种常用实现模式，选其中一种即可： #

模式1：子组件自己维护商品状态 #

直接把请求逻辑和状态都放在ProductsList组件内部，不需要接收外部products属性：

import { useState, useEffect } from 'react';
import getProducts from './你的getProducts函数路径';

// 补充Product类型定义，和你实际接口返回字段对齐
interface Product {
  id: string | number;
  // 其他字段如name/price等自行补充
}

const ProductsList = () => {
  // 声明响应式状态存商品列表，初始为空数组
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    // 异步请求要封装到async函数内执行
    const fetchProducts = async () => {
      const productList = await getProducts();
      // 将请求结果存入状态，触发组件重渲染
      setProducts(productList);
    };
    fetchProducts();
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {/* 空数组map不会报错，不需要额外加&&判断 */}
      {products.map((product) => (
        <ProductItem key={product.id} product={product} />
      ))}
    </RootContainer>
  );
};

export default ProductsList;

模式2：父组件维护状态，子组件仅做渲染 #

如果你需要复用商品数据，就把请求逻辑移到调用ProductsList的父组件中：

1. 父组件内调用getProducts，将结果存在父组件的useState中
2. 把状态作为products属性传给ProductsList组件
3. 子组件不需要再自己调用接口，直接用传入的props渲染即可

跨域请求要确保后端5000端口的服务已经配置了CORS允许跨域，否则fetch请求会被浏览器拦截，拿不到返回数据。

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