React Hooks TypeError：products.map 不是函数

Question

我是新手。我收到此错误 products.map 不是函数。我之前没有收到任何与 .map 函数相关的错误，但今天它突然出现了。有人可以帮我解决这个问题吗？

import SingleProduct from "./SingleProduct";
import axios from "axios";
import { Container, Grid, Grow } from "@material-ui/core";

const Products = () => {
  const [products, setProducts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const classes = useStyles();

  const getData = () => {
    axios
      .get("http://localhost:4000/api/products")
      .then((res) => {
        setProducts(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  React.useEffect(getData, []);
  return (
    <div>
        <Container>
          <Grow in>
            <Grid container spacing={6}>
              {products.map((product, index) => (
                <SingleProduct key={index} product={product} />
              ))}
            </Grid>
          </Grow>
        </Container>
    </div>
  );
};

export default Products;

Answer 1

尝试在第 43 行添加其他保护 => https://github.com/muneebghani/semproject/blob/master/client/src/components/products/Products.js

) : products && (products.length === 0) ? (
  toast.error("Error: There are no products in DB", {
    position: toast.POSITION.TOP_CENTER,
    toastId: "",
    transition: Slide,
  })

Answer 2

在你的then中，你应该首先验证res.data是一个数组。

if(Array.isArray(res.data)) { 
    setProducts(res.data) 
} else { 
    throw new Error (“data invalid”)
}

实际的解决方案似乎是通过您的回复解决问题。无论如何，最好验证您在前端得到了正确的响应。