Question

如何基于父数组的键在反应中映射子数组？

我尝试通过主数组的id键映射到dish_count数组的映射元素

<TableCell  align="left">
       {this.state.persons.map((items,name) => 
             <div key={this.state.persons.id}> 
    {(typeof(items.dish_count)=="object")? (<div>
              { items.dish_count.map((subdata) =>
                                    <table>
                                       <td >
                                         {subdata.meal_type}
                                         </td>
                                         </table>
                                  )
                                      }
                               </div>): (null)}</div>)}



                               </TableCell>
                               <TableCell align="left">    {this.state.persons.map((items,name) => 
                                <div key={this.state.persons.id} >{(typeof(items.dish_count)=="object")? (<div>
                                      {
                                       items.dish_count.map((subdata) =>

                                       <table>
                                       <td >
                                         {subdata.dish_count}
                                         </td>
                                         </table>
                                       )
                                      }
                               </div>): (null)}</div>)}</TableCell>

我想通过父数组的键ID映射子数组dish_count。我可以进行映射，但是映射是多重的，并且不被父数组key独占.dish_count是包数组的子数组

人数组

 "data": [
            {
                "id": 1,
                "name": "Gold",
                "dish_count": [
                    {
                        "dish_count": 4,
                        "meal_type": "Starters"
                    },
                    {
                        "dish_count": 4,
                        "meal_type": "Main Course"
                    },
                    {
                        "dish_count": 4,
                        "meal_type": "Dessert"
                    },
                    {
                        "dish_count": 4,
                        "meal_type": "Lunch"
                    }
                ]
            },
            {
                "id": 2,
                "name": "Basic",
                "dish_count": [
                    {
                        "dish_count": 2,
                        "meal_type": "Starters"
                    },
                    {
                        "dish_count": 2,
                        "meal_type": "Main Course"
                    },
                    {
                        "dish_count": 2,
                        "meal_type": "Dessert"
                    },
                    {
                        "dish_count": 2,
                        "meal_type": "Lunch"
                    }
                ]
            }
]

我想要餐食类型淘金者4 主菜4 沙漠4 午餐4 基本入门2 主菜2 沙漠2 午餐2

Answer 1

您的代码中有一些问题：

this.state({persons:''});：这会将初始人员设置为空字符串，并且会因map而失败。
console.log('package',this.state.persons)：setState是异步的，console.log将不会输出所需的状态，但会显示先前的状态。使用setState的回调作为第二个参数来访问新状态：
```
this.setState({persons:res.data.data.data}, () => console.log('package',this.state.persons) );
```
this.state.persons.map((items, name) =>：map函数将提供不同的参数：第一个是人员，第二个是该人员在数组中的索引。
div key = {this.state.persons.id}：由于人员是一个数组，因此键是不确定的。如果正确使用了地图功能，则可以使用person.id。

解决这些问题后，代码应该可以按预期工作。

要仅显示每人预期的菜肴，而不打印重复项，则必须这样写：

class Table extends React.Component {       
    render() {
        return <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>Meal Type</td>
                    <td>Number of Dishes</td>
                </tr>
            </thead>
            <tbody>
                {this.state.persons.map(person =>
                    <tr>
                        <td>{person.id}</td>
                        <td>{person.name}</td>
                        <td>
                            <table>
                              <tbody>
                                   {person.dish_count.map(dish => <tr>
                                         <td>{dish.meal_type}</td>
                                     </tr>
                                     )}
                              </tbody>
                        </table>
                    </td>
                    <td>
                        <table>
                          <tbody>
                              {person.dish_count.map(dish => <tr >
                                  <td>{dish.dish_count}</td>
                               </tr>
                               )}
                          </tbody>
                        </table>
                    </td>
                </tr>
            )
            }
        </tbody>
    </table >
    }
}

通过不遍历每个子表的人，您可以删除重复的数据。

codepen

希望这会有所帮助。

如何通过父数组react的键来映射子数组

1 个答案: