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

您拥有的是一个不是数组的对象，而.Map（）是一个Array方法。

您可以通过这种方式对对象执行类似的操作

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

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

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

希望它会有所帮助：）

Answer 2

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

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

Answer 3

尝试

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

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

使用react在map中列出JSON的所有值时遇到问题

3 个答案: