如何从一组数据中显示与北极星反应的产品列表？

Question

我正在尝试创建一个使用一组数据的产品列表。我想从这些数据中返回标题，并将其显示在列表中的屏幕上。我正在尝试使用一个forEach循环，但我不确定具体如何实现这一点。

到目前为止，这就是我所拥有的：

import info from "./info";
import React from "react";

const ProductList = () => {
  function listItems(item) {
    return (
      <Listbox.Option>
        <Heading>{node.title}</Heading>
      </Listbox.Option>
    );
  }

  info.data.products.edges.forEach(listItems);

  return listItems();
};

export default ProductList;

有人能告诉我哪里出了问题吗？

Answer 1

您可以做以下类似的事情：

​

var data = [
  {
    id: 1,
    title: "Test1"
  },
  {
    id: 2,
    title: "Test2"
  }
];

export default function App() {
  return (
    <ul>
      {data.map((x) => {
        return <li key={x.id}>{x.title}</li>;
      })}
    </ul>
  );
}

​

您可以在沙盒中运行代码。

Answer 2

你能把它简化成这样的版本吗：

import info from "./info";
import React from "react";

const ProductList = () => {
  return info.data.products.edges.map((node) => (
    <Listbox.Option>
      <Heading>{node.title}</Heading>
    </Listbox.Option>
  ));
};

export default ProductList;

这对你有用吗？