Question

我是React的新手，我试图像这样映射包含嵌套数组的JSON格式的文本：

{
  "shipments": [
{
    "id": "S1000",
    "name": "T-shirts from Shanghai to Hamburg",
    "cargo": [
        {
            "type": "Fabric",
            "description": "1000 Blue T-shirts",
            "volume": "2"
        }, 
        {
            "type": "Fabric",
            "description": "2000 Green T-shirts",
            "volume": "3"
        }
    ],
    "mode": "sea",
    "type": "FCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Shanghai Port",
    "services": [
        {
            "type": "customs"
        }
    ],
    "total": "1000",
    "status": "ACTIVE",
    "userId": "U1000"
}, 
{
    "id": "S1001",
    "name": "New spring collection",
    "cargo": [
        {
            "type": "Furniture",
            "description": "300 Tables",
            "volume": "20"
        }, 
        {
            "type": "Furniture",
            "description": "1500 Chairs",
            "volume": "15"
        }
    ],
    "mode": "sea",
    "type": "FCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Ningbo port",
    "services": [
        {
            "type": "customs"
        }, 
        {
            "type": "insurance",
            "value": "100"
        }
    ],
    "total": "3000",
    "status": "ACTIVE",
    "userId": "U1002"
},
}

我要实现的目标是对此进行映射并在表格中显示详细信息。我尝试过这种方式映射：

         {
                shipments.map((item, i) => (
                    (typeof(item) == 'array') ? 
                        item.map((subitem, i) => (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{ item.cargo.type} </td>
                                <td>{ item.services.value} </td>
                            </tr>
                        )) 
                        :
                    null
                ))
            }

另一个可能的解决方案是这样的：

`shipments.map((item) => {
    console.log('first loop')
    Object.keys(item).filter(key=>{
        let value = item[key];
        if(Array.isArray(value)){ 
            value.map(subitem=>{
                console.log(subitem.type)
            })
        }
 })
})`

但是我无法解决。一个可重用的解决方案将不胜感激。预先感谢。

Answer 1

尚不清楚您希望输出的内容是什么，但让我解释一下数据的情况，希望您可以对其进行修改以适合您的需求：

映射发货将为您提供一个对象，例如您回来的第一个item是：

{
    "id": "S1000",
    "name": "T-shirts from Shanghai to Hamburg",
    "cargo": [
        {
            "type": "Fabric",
            "description": "1000 Blue T-shirts",
            "volume": "2"
        }, 
        {
            "type": "Fabric",
            "description": "2000 Green T-shirts",
            "volume": "3"
        }
    ],
    "mode": "sea",
    "type": "FCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Shanghai Port",
    "services": [
        {
            "type": "customs"
        }
    ],
    "total": "1000",
    "status": "ACTIVE",
    "userId": "U1000"
}

您可以从此处直接访问仅是字符串的数据，而无需通过在项目上进行映射来进行操作，只需直接访问值即可，例如

shipments.map((item, i) => (
  <tr key={item.id}>
      <td>{item.id}</td>
  </tr>
))

如果您知道某个项目是一个数组，则可以对其进行映射，以便扩展示例：

shipments.map((item, i) => (
  <tr key={item.id}>
    <td>{item.id}</td>
    {item.cargo.map(cargoItem => {
      return (
        <React.Fragment>
          <td>{cargoItem.type}</td>
          <td>{cargoItem.volume}</td>
        </React.Fragment>
      );
    })}
  </tr>
));

如果您想动态地执行此操作，可以使用Object.values之类的东西，并在映射到该类型之前检查其类型，或者在它是字符串的情况下显示它，例如

shipments.map(item => (
  // For each shipment create a row
  <tr key={item.id}>
    {/* For each of the keys, get its value e.g. S1000, T-Shirts 
        from Shanghai to Hamburg, an array of cargo */}
    {Object.values(item).map(subitem => {
      // If the subitem is an array (like cargo) then map over 
      // it and return something for each item
      if (Array.isArray(subitem)) {
        return subitem.map(d => {
          // ...
        });
      } else {
        // Otherwise just return the string
        return <td>{subitem}</td>;
      }
    })}
  </tr>
));

Answer 2

第一个不能（typeof（item）=='array'）获取数组，因为当我们映射任何数组时，它获取对象而不是数组。

 {
    itemData.map((item, i)=>{
       return(
           <div key={i}>
                {(item.shipments || []).map(item => {
                  return (
                    <tr key={item.id}>
                      <td>{item.id}</td>
                      <td>{item.cargo.map(p => p.type).toString()} </td>
                      <td>{item.services.map(p => p.value).toString()} </td>
                    </tr>
                  );
                })}
        </div>
      )
      })      
 }

在JSON中映射多个嵌套数组

2 个答案: