在React中如何循环一个对象？

Question

数据:

我的数据里面包含了数组，我尝试使用默认代码进行循环:

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

我希望能够先显示这些数组的名称（这是日期），然后显示这些数组包含什么，但我遇到了错误：

joblist.map不是一个函数

- Егор Кротенко

---

你截图中展示的是joblist对象吗？ - Robby Cornelissen

公平地说，控制台给出了你的答案。正如你可以清楚地看到的那样，joblist是一个对象，其中键是日期而不是数组。 - GillesC

正如 @GillesC 已经说的那样：它不是一个数组，而是一个对象。 - Robby Cornelissen

joblist 不是一个数组，而是一个对象。你需要先将它转换为数组。 - Win

@ЕгорКротенко 你想打印数组对象的哪个值？ - Mayank Shukla

Answer 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);
   })
})

- Mayank Shukla

---

id未定义，需要添加id。 - Егор Кротенко

哦，抱歉应该是 key={el.id} 而不是 {id}，已更新答案。 - Mayank Shukla

Answer 2

正如您所看到的，joblist 不是数组，而是对象。如果您真的想使用 map，则可以使用 new Map()。new Map() 构造函数接受一个键值对的可迭代对象。使用 Object.entries，您可以轻松地将对象转换为 Map：

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

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

       </div>

     ))}
</div>

- Ruhul Amin