在react[duplicate]中使用map列出JSON的所有值时遇到困难

Question

我有一个Json数据如下所示

{
 A: {name: 'a', date: 'x'}
B: {name: 'b', date: 'x'}
C: {name: 'c', date: 'x'}
D: {name: 'd', date: 'x'}

}

我试着列出所有的名字。但是，我得到一个错误

。data.map不是函数

我的代码如下所示:

 {data.map((item) => {
    return(
      <div>
     {item.name}
    </div> )
 })}

如有任何帮助，我们将不胜感激！谢谢

Answer 1

必须将对象值转换为数组。

{data && Object.values(data).map((item) => {
    return(
      <div>
     {item.name}
    </div> )
 })}

Answer 2

这里有一个对象，而不是一个数组，。map（）是一个数组方法。

你可以用这种方式对一个对象做类似的事情

 {data && Object.values(data).map((propVal) => {
    return(
      <div>
     {propVal}
    </div> )
 })}

您还可以使用object.entries（），每个条目都是一个包含两个元素的数组。项[0]是键，项[1]是值。这样你也可以添加一个检查道具名称。

 {data && Object.entries(data).map((entry) => {
            if(entry[0] === 'name') {
               return(
                  <div>
                 {propVal}
                </div> )
             })}    
} 

希望有帮助:）

Answer 3

试试这个

Object.values(data).map( // the rest

Object.Values将为您提供一个给定对象自己的可枚举属性值的数组。