如何在 React.js 中遍历来自 json 的对象数组

Question

我正在尝试使用 map 函数遍历外部 json 文件中的对象数组。循环成功，但我不确定如何访问对象属性。见下文。

我正在使用 object.keys(obj).map() 但无法访问各个属性。 Map 不断输出数组索引号。

这是我要迭代的数据。

[
   {
     "id" : "12345",
     "customer" : "BMW",
   },
   {
     "id" : "45678",
     "customer" : "Ford",
   },
   {
     "id" : "78901",
     "customer" : "Google",
   } 
] 

我有一个状态挂钩，数据将被保存到

const [accountData, setAccountData] = useState('');

下面的函数从外部json文件中获取数据并用它设置状态。

 axios.get('./data/account-info.json')
  .then((response) => {
     //set state
     setAccountData(response.data);
  })
  .catch((error) => {
     console.log(error);
  });

我用映射函数遍历状态对象

Object.keys(accountData).map((id,customer) => {
  return(
    <div>
      <p>ID: {id}</p>
      <p>Name: {customer}</p>
    </div>
  )
})

输出不断打印出索引号而不是适当的值

//outputted elements

<div>
  <p>ID: 0</p>
  <p>Name: 0</p>
</div>

<div>
  <p>ID: 1</p>
  <p>Name: 1</p>
</div>

<div>
  <p>ID: 2</p>
  <p>Name: 2</p>
</div>

你能告诉我我在这里做错了什么吗？我知道它必须是简单的。

Answer 1

您可以直接迭代accountData，因为它是一个数组。
每个项目都是一个对象，因此您需要destructure，如下所示。
（你不需要，但这是我从你的代码中看到的意图）

您还需要为每个元素添加一个键，以通知 React 如何跟踪元素。

//               ? destrcuture the properties
accountData.map(({ id,customer }) => {
  return(
   {/* ? make sure to add keys here too */}
    <div key={id}>
      <p>ID: {id}</p>
      <p>Name: {customer}</p>
    </div>
  )
})

--回复[COMMENT]--

所以每当我删除 object.keys() 时，它都会向我抛出这个错误 TypeError: accountData.map is not a function

您会仔细检查response.data 是否如您在帖子中提到的那样吗？
如果你运行下面的代码，它将正确打印id & customer 数组。

let accountData = [
   {
     "id" : "12345",
     "customer" : "BMW",
   },
   {
     "id" : "45678",
     "customer" : "Ford",
   },
   {
     "id" : "78901",
     "customer" : "Google",
   } 
] 
accountData.map(({id, customer}) => console.log(id, customer))

Answer 2

试试这个

Object.keys(accountData).map((e) => { 返回（

ID：{e.id}

姓名：{e.customer}

) })

Answer 3

accountData.map(customer => {
  return(
    <div
      key={ customer.id }
     >
      <p>ID: { customer.id }</p>
      <p>Name: { customer.customer }</p>
    </div>
  )
})

Answer 4

Object.keys(accountData) 将为您提供数组的键，例如 0、1、2。只需执行 accountData.map 来遍历数组即可。

Answer 5

Object.keys 函数返回其键的数组。对于数组对象，它的键是它的索引。因此，对于您的 accountData，Object.keys(accountData) 返回 ['0', '1', '2']。

如果你还想使用 Object.keys 功能，你可以这样做。

Object.keys(accountData).map(key => (
    <div key={accountData[key].id}>
        <p>ID: {accountData[key].id}</p>
        <p>Name: {accountData[key].customer}</p>
    </div>
));

但如果是数组，最好直接对它应用map函数。

accountData.map(account => (
    <div key={account.id}>
        <p>ID: {account.id}</p>
        <p>Name: {account.customer}</p>
    </div>
));

就是这样。