如何映射包含数组的对象答案

【问题标题】：How to map an object that contains arrays如何映射包含数组的对象
【发布时间】：2020-06-26 21:45:21
【问题描述】：

我是 javascript 新手，所以我有一个包含三个数组的对象，我想映射它并列出我的数据

    const [Foods,setFoods] = useState({
      "id_food":[1,2,3],
      "name_food":["food1","food2","food3"],
      "quantity":[10,22,12]
  })

一个虚构的代码：

{ Foods.map((id,name,qte) =>(
    <p>{id}{name}{qte}</p>
 ))}

【问题讨论】：

完全不清楚你在这里问什么。
我想映射 Foods 对象
将其映射到 what?
在列表中显示它===> 1 food1 10
基本要求一个zip功能

标签： javascript arrays json reactjs

【解决方案1】：

  Object.keys(Foods).forEach(prop => {
    Foods[prop].map((item) => console.log(item));
  });

【讨论】：

【解决方案2】：

可能是这样的：

Foods.id_food.map((id, i) => {
    const name_food = Foods.name_food[i];
    const quantity = Foods.quantity[i];
    return  <AwesomeReactComponent key={id} nameFood={name_food} quantity={quantity}/>;
});

【讨论】：

【解决方案3】：

let mappedArray = Foods.id_food.map((ele, i) => {
    let name = Foods.name_food[i]
    let quantity = Foods.quantity[i]
    return {id: ele, name: name, quantity: quantity}
})

输出：

(3) [{…}, {…}, {…}]
0: {id: 1, name: "food1", quantity: 10}
1: {id: 2, name: "food2", quantity: 22}
2: {id: 3, name: "food3", quantity: 12}

【讨论】：