在 React 中映射数组中每个对象的数组答案

【问题标题】：Mapping an array of each object in array in React在 React 中映射数组中每个对象的数组
【发布时间】：2021-08-12 16:14:20
【问题描述】：

我有一个 data.json 文件，其中包含一组组对象，每个组对象都包含 products 数组，例如：

[
{
 "groupId": int
 "familyId": int,
 "products": array (lenght of 10-50)
 }
{
 "groupId": int
 "familyId": int,
 "products": array (lenght of 10-50)
 }, and so on...
]

我想将它们映射为：

<ul> GroupId 
    <li>Product 1</li>
    <li>Product 2</li>
<ul/>

<ul>
   GroupId
   <li>Product 1</li>
   <li>Product 2</li>
</ul>
etc.

我尝试使用 foreach 函数，然后映射每个数组，但它不起作用。

import data from '../data.json';
let productsList = []; 
 
{data.forEach((el) => {productsList.push(el.products)})}
{productsList.forEach((array) => {
    array.map((el) => {
         return (
             <ul>
                  <li>{el.name}</li>
             </ul>
         )
      })
})}

【问题讨论】：

请提供minimal reproducible example 说明您具体尝试了什么以及“不起作用” 的含义。
帖子已编辑
这是一半。鉴于 forEach 返回 undefined ，不清楚您为什么期望它起作用。
当我将 console.log(array) 添加到 forEach 语句时，我收到一个实际的数组
你可以log数组，当然；我说它不会返回任何东西。另请注意，您要发出的 HTML 并不完全有效。

标签： javascript arrays reactjs object

【解决方案1】：

我建议你用简单的 react 组件来解决这个问题，它会让你的代码更具可读性。

我创建了一个简单的示例来解决您的问题

export default function App() {
  const data = [
    {
      groupId: 1,
      familyId: 1,
      products: [
        { id: 1, name: "product 1", price: 10 },
        { id: 2, name: "product 2", price: 20 }
      ]
    },
    {
      groupId: 2,
      familyId: 2,
      products: [{ id: 3, name: "product 3", price: 30 }]
    }
  ];
  return (
    <div className="App">
      {data.map((group) => (
        <ProductGroup group={group} />
      ))}
    </div>
  );
}

产品组组件

const ProductGroup = ({ group }) => {
  return (
    <>
      <ul>{group.groupId}</ul>
      {group.products.map((product) => (
        <ProductItem product={product} />
      ))}
    </>
  );
};

ProductItem 组件

const ProductItem = ({ product }) => {
  return (
    <li>
      <span>{product.name}</span>
      <span style={{ marginLeft: "10px" }}>{product.price}$</span>
    </li>
  );
};

【讨论】：

太棒了！非常感谢，事件没有考虑创建几个组件并将数据传递给它们。你是天才:)

【解决方案2】：

试试这个

const listItems = () => (
  <>
    {array.map((group) => (
      <ul key={group.groupId}>
        {group.groupId}
        {group.products.map((productList, index) => (
          <li key={index}>{productList}</li>
        ))}
      </ul>
    ))}
  </>
);

【讨论】：