为什么我的数组一直输出 [object]？

Question

我正在尝试使用 forEach 循环 return 数组中每个项目的组件。但是，当我的 React 应用程序加载它时，它只是一遍又一遍地 returns [Object] 。为什么会这样，我该如何解决？

代码如下：

const ProductList = () => {
  let product_image;
  let product_heading;
  let product_listbox_options = "";

  info.data.products.edges.forEach((edge) => {
    console.log(edge);
    const product = edge.node;
    product_heading = edge.node.title;
    if (
      product.media !== undefined &&
      product.media.edges !== undefined &&
      product.media.length > 0
    ) {
      product.media.edges.forEach((media) => {
        if (media.node.mediaContentType === "IMAGE") {
          product_image = (
            <Thumbnail
              source={media.node.image.originalSrc}
              alt={product.title}
            />
          );
        }
      });
    }

    product_listbox_options += (
      <Listbox.Option>
        <Heading>{product_heading}</Heading>
        {product_image}
      </Listbox.Option>
    );
  });
  return product_listbox_options;
};

Answer 1

尝试这样做：

console.log(JSON.stringify(edge, null, 2))

Answer 2

ReactJS 不是这样工作的

你可以使用map方法代替forEach

Answer 3

你在这里做什么

product_listbox_options += (
      <Listbox.Option>
        <Heading>{product_heading}</Heading>
        {product_image}
      </Listbox.Option>
    );

您是否正在将空字符串值添加到导致 [Object] 的 React 组件。

正如@tieulinh 所说，如果你想 return 一个 list/array 可以通过反应呈现的组件，你应该使用 .map() 而不是 .forEach()。所以你的组件变成这样：


const ProductList = () => {
  let product_image;
  let product_heading;
  return (
    <>
      {info.data.products.edges.map((edge, index) => {
        const product = edge.node;
        product_heading = edge.node.title;
        if (
          product.media !== undefined &&
          product.media.edges !== undefined &&
          product.media.length > 0
        ) {
          product.media.edges.forEach((media) => {
            if (media.node.mediaContentType === "IMAGE") {
              product_image = (
                <Thumbnail
                  source={media.node.image.originalSrc}
                  alt={product.title}
                />
              );
            }
          });
        }
        return (
          //Change this key to something meaningful from your edge object
          <Listbox.Option key={index}>
            <Heading>{product_heading}</Heading>
            {product_image}
          </Listbox.Option>
        );
      })}
    </>
  );
};

为什么我的数组一直输出 [object]？

Why does my array keep outputting [object]?

javascript

shopify

reactjs

polaris