javascript - React - 图像数组未正确渲染

Question

在这里做一个项目，我遇到了一个问题。我正在使用 API 并收到产品的图像。它看起来像这样：

我遇到的问题是图像没有出现在我的页面上，什么也没有出现。即使我尝试只在<h1>标签中写入链接，也不会出现任何内容。我试图在控制台中记录 URL，它使用该.map方法在那里工作。

我已经尝试过Object.keys()and array.map()，但它们都不起作用。

这是我的 API 获取代码：

  useEffect(() => {
    const options = {
      method: "GET",
      url: "https://asos2.p.rapidapi.com/products/v3/detail",
      params: params,
      headers: {
        "x-rapidapi-key": "",
        "x-rapidapi-host": "",
      },
    };

    axios
      .request(options)
      .then(function (response) {
        console.log(response.data);
        setProduct(response.data);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []);

  // This works
  product?.media?.images.map((item) => {
    console.log(item.url);
  });

  return (
    <div>
      <Product
        name={product?.name}
        price={product?.price?.current?.text}
        brand={product?.brand?.description?.replace(/(<([^>]+)>)/gi, "")}
        brandName={product?.brand?.name}
        aboutMe={product?.info?.aboutMe?.replace(/(<([^>]+)>)/gi, " ")}
        careInfo={product?.info?.careInfo?.replace(/(<([^>]+)>)/gi, "")}
        sizeAndFit={product?.info?.sizeAndFit?.replace(/(<([^>]+)>)/gi, "")}
        media={product?.media?.images}
      />
    </div>
  );

这是它应该呈现的产品部分：

  <div>
    {props.media?.map((media) => {
      <h1>{media.url}</h1>;
    })}
  </div>

该页面完全是空白的。

我错过了什么？

标签： javascriptreactjs

Answer 1

我认为 return 语句中缺少map

  <div>
    {props.media?.map((media) => {
      return(<h1>{media.url}</h1>);
    })}
  </div>

或者你也可以去速记

  <div>
    {props.media?.map((media) => <h1>{media.url}</h1>)}
  </div>