ReactJS映射:如何迭代[关闭]

当您尝试对未定义或null值调用map函数时,通常会出现错误“无法读取undefined的属性(读取'map')”。这通常发生在您试图访问尚未加载或格式不符合预期的数据时。

对于您的第一个JSON格式:

{
"data": [       
    {
        "id": "1234",
        "name": "Adm",
        "date": "2020-01-14 00:00:00.000",
        "value": "4444.00"            
    }       
]

}

**你可以像这样迭代它: **

import React from 'react'
function MyComponent({ response }) { return (
<div>
  {response && response.data && response.data.map((item) => (
    <div key={item.id}>
      <p>ID: {item.id}</p>
      <p>Name: {item.name}</p>
      <p>Date: {item.date}</p>
      <p>Value: {item.value}</p>
    </div>
  ))}
</div>
  );

} 对于您提到的第二种JSON格式: 这不是有效的JSON。如果你想在数据中有一个对象,它应该看起来像这样:

{
    "data": {
        "id": "1234",
        "name": "Adm",
        "date": "2020-01-14 00:00:00.000",
        "value": "4444.00"            
    }
}

你可以这样访问它:

import React from 'react';

function MyComponent({ response }) {
  return (
    <div>
      {response && response.data && (
        <div>
          <p>ID: {response.data.id}</p>
          <p>Name: {response.data.name}</p>
          <p>Date: {response.data.date}</p>
          <p>Value: {response.data.value}</p>
        </div>
      )}
    </div>
  );
}

在这种情况下,您不需要使用map,因为数据是单个对象,而不是数组。

在尝试访问数据的属性或方法之前,请务必检查数据是否存在,以避免此类错误。