React：为什么在 .map 上数组不显示项目列表？

Question

我正在尝试显示从后端的 API 获得的项目列表。但是，当我尝试映射数组时，它没有显示任何项目。我究竟做错了什么？有人可以帮忙吗？

我尝试控制台日志，我可以看到正确获取的项目列表。 h2 标签也会显示。但不是 .map 结果。

这是代码：

interface Props {
  products: Product[] | [];
}

const ProductsList = ({ products }: Props) => {
  useEffect(() => {
    getProducts();
    console.log('fetched data', getProducts());
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {products &&
        products.map((product) => {
          return <ProductItem key={product.id} product={product} />;
        })}
    </RootContainer>
  );
};

export default ProductsList;

这是从另一个端口获取数据的 getProducts() 函数。

const getProducts = async () => {
  let API_URL = 'http://localhost:5000/api/Products';

  const response: any = await fetch(API_URL);
  const data = await response.json();

  return data;
};
export default getProducts;

Answer 1

我认为问题可能是您正在检索产品但实际上并未对它们进行任何操作 - 因此您在迭代之前执行的“产品”检查将 return 错误。

尝试使用状态变量：

const ProductsList = () => {

  const [products, setProducts] = useState<product[]>();

  useEffect(() => {
    getProducts().then((result) => setProducts(result);
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {products &&
        products.map((product) => {
          return <ProductItem key={product.id} product={product} />;
        })}
    </RootContainer>
  );
};

此处的原则是，当 getProducts() 方法 returns 时，它将使用产品列表更新状态变量。此状态更改将导致组件刷新并达到 products.map。

Answer 2

您正在 useEffect 挂钩上提取产品，但没有将它们存储为状态值。尝试使用 useState 来实现这一点，并尝试调整您的渲染逻辑。


import {useState, useEffect} from 'react';
//...

interface Props {
  products: Product[] | [];
}

const ProductsList = (props: Props) => {

  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    const _products = getProducts();
    console.log('fetched data',_products);
    setProducts(_products);
  }, []);

  return (
    <RootContainer>
      <h2>test</h2>
      {products &&
        products.map((product) => {
          return <ProductItem key={product.id} product={product} />;
        })}
    </RootContainer>
  );
};

export default ProductsList;

如果您仍然没有看到任何东西，请尝试像这样修改您的渲染逻辑：


<RootContainer>
    <h2>test</h2>
    {products && products.map((product) => 
        (<ProductItem key={product.id} product={product} />)
    )}
</RootContainer>

由于您使用的是 TypeScript，因此条件渲染的处理方式与 JS 略有不同。所以在检查 products && 时试试这个：

<RootContainer>
    <h2>test</h2>
    {products ? products.map((product) => (
        <ProductItem key={product.id} product={product} />)
        : null
     )}
</RootContainer>

现在，根据您为 RootContainer 组件定义的道具，可能不允许将 null 作为 child 传递。如果是这种情况，请尝试将 null 更改为 <></> 以传递 React Fragment 而不是

React：为什么在 .map 上数组不显示项目列表？

React: Why on .map an array doesn't show list of items?

typescript

reactjs

react-typescript