axios 获取TypeError：当我尝试提取数据时，无法读取未定义的属性(阅读“map”)

vaqhlq81 于 2023-06-22 发布在 iOS

关注(0)|答案(2)|浏览(126)

我有一个react前端，当我试图从我的node js后端获取数据时，我的API似乎是有序的

const SingleProductPage = () => {

  const { productId } = useParams();

  const [product, setProduct] = useState({});

  useEffect(() => {
    const fetchProduct = async () => {
      const { data } = await axios.get(`/api/Product/${productId}`);
      setProduct(data);
    };
    fetchProduct();
  }, [productId]);

  if (!product) {
    return <Error errorMessage="Sorry, Product not found!" />;
  }

  return (
        <div className="single-slider-div">
          <Splide>
            {product.src.map((src, index) => (
              <SplideSlide>
                <img key={index} src={src} alt="product img" />
              </SplideSlide>
            ))}
          </Splide>
        </div>
      
  );
};

export default SingleProductPage;

我尝试将一个对象设置为product的初始状态，但它返回相同的错误，我尝试测试后端路由，它工作正常。我添加了代码的相关部分。

axios

来源：https://stackoverflow.com/questions/76411112/getting-typeerror-cannot-read-properties-of-undefined-reading-map-when-i-tr

2条答案

按热度按时间

n3h0vuf21#

在return语句中添加product和product.src的条件检查。还要将key={index}添加到SplideSlide组件中。

return (
    <div className="single-slider-div">
        <Splide>
            {product && product.src && product.src.map((src, index) => (
                <SplideSlide key={index}>
                    <img src={src} alt="product img" />
                </SplideSlide>
            ))}
        </Splide>
    </div>
);

赞(0）回复(0）举报 2023-06-22

ybzsozfc2#

看起来您试图在组件呈现之前访问product.src，因此出现未定义值错误。您可以按如下方式重构代码->

const SingleProductPage = () => {
  const { productId } = useParams();
  const [product, setProduct] = useState({});

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const { data } = await axios.get(`/api/Product/${productId}`);
        setProduct(data);
      } catch (error) {
        //? Error handling
        console.log(error);
      }
    };
    fetchProduct();
  }, [productId]);

// changed the if statement to factor in the product.src
  if (!product || !product.src) {
    return <Error errorMessage="Sorry, Product not found!" />;
  }

  return (
    <div className="single-slider-div">
      <Splide>
        {product.src.map((src, index) => (

// defining key prop here
          <SplideSlide key={index}>
            <img src={src} alt="product" />
          </SplideSlide>
        ))}
      </Splide>
    </div>
  );
};

export default SingleProductPage;

此外，我还将key prop移动到了“SplideSlide”组件，因为在React文档中提到的here的数组上Map时，最好在最外层元素定义key prop。

赞(0）回复(0）举报 2023-06-22

我来回答

axios 获取TypeError：当我尝试提取数据时，无法读取未定义的属性(阅读“map”)

2条答案

相关问题

热门标签

最新问答