在反应中循环一个对象？答案

【问题标题】：Loop an object in react?在反应中循环一个对象？
【发布时间】：2018-01-18 06:27:24
【问题描述】：

数据：

我有内部数组的数据，我尝试使用默认代码循环：

 <div className="loop-container">
    {
        joblist.map((itemb,index) => (
            <div>
            </div>
        ))
    }
</div>

我想先显示该数组的名称，（这是日期）然后显示该数组的组成，但我得到错误：

joblist.map 不是函数

【问题讨论】：

joblist 是您在屏幕截图中显示的对象吗？
公平地说，控制台有你的答案。如您所见，joblist 是一个对象，其中键是日期而不是数组。
正如@GillesC 已经说过的：它不是一个数组，它是一个对象。
joblist 不是一个数组，而是一个对象。您需要先将其转换为数组。
我对此进行了修改，现在我看到了所有键 {Object.keys(joblist).map((key) => ( <div>{key}</div> ))} 但接下来如何显示数组？

标签： javascript arrays reactjs

【解决方案1】：

我们不能直接在对象上使用map、filter，首先我们需要从该对象中获取一个数组（属性或属性值），然后只有我们可以。

你得到的数据不是一个数组，所以我们不能直接使用Array.prototype.map。您需要做的是首先使用Object.keys 获取数组中的所有键。获得数组后，在其上使用 map，在 map 函数体内使用另一个 map 来迭代值。

您也可以使用Object.values 或Object.entries，但模式与Object.keys() 不同。

这样写：

<div className="loop-container">
    {
        Object.entries(joblist).map(([key, value]) => (
            <div id={key}>
                Date: {key}
                {
                    value.map(el => <div key={el.id}> {el.created_time} </div> )
                }
            </div>
        ))
    }
</div>

使用Object.entries检查此片段：

let obj = {
   'key1': [{a:1}, {a:2}, {a:3}],
   'key2': [{a:4}, {a:5}, {a:6}],
   'key3': [{a:7}, {a:8}, {a:9}]
};

Object.entries(obj).map(([key, value]) => {

   console.log('key name = ', key);

   value.map(el => {
      console.log(el.a);
   })
})

使用Object.keys检查此片段：

let obj = {
   'key1': [{a:1}, {a:2}, {a:3}],
   'key2': [{a:4}, {a:5}, {a:6}],
   'key3': [{a:7}, {a:8}, {a:9}]
};

Object.keys(obj).map(key => {

   console.log('key name = ', key);

   obj[key].map(el => {
      console.log(el.a);
   })
})

使用Object.values检查此片段：

let obj = {
   'key1': [{a:1}, {a:2}, {a:3}],
   'key2': [{a:4}, {a:5}, {a:6}],
   'key3': [{a:7}, {a:8}, {a:9}]
};

Object.values(obj).map(value => {

   console.log('value = ', JSON.stringify(value));
   
   value.map(el => {
      console.log(el.a);
   })
})

【讨论】：

id未定义，认为需要添加id
哦抱歉应该是key={el.id} 而不是{id}，更新了答案。

【解决方案2】：

如您所见，joblist 不是数组，而是对象。如果你真的想使用map，那么你可以使用new Map()。 new Map() 构造函数接受一个可迭代的条目。使用Object.entries，您可以轻松地从 Object 转换为 Map：

var mapjoblist = new Map(Object.entries(joblist));

<div className="loop-container">
    {mapjoblist.map((itemb,index) => (
       <div>
        .......

       </div>

     ))}
</div>

【讨论】：