如何在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);
  });

我使用map函数遍历状态对象。

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>

请问您能告诉我我在这里做错了什么吗？我知道这肯定是一些简单的问题。

- David Sanders

Answer 1

你可以直接迭代accountData，因为它是一个数组。
每个项目将是一个对象，因此您需要像下面看到的那样进行解构。
（您不需要这样做，但这是我从您的代码中理解的意图）
另外，您需要为每个元素添加一个键，以通知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 不是一个 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))

- dance2die

---

每当我删除object.keys()时，它就会抛出这个错误TypeError: accountData.map is not a function。 - David Sanders

@DavidSanders 我已经更新了答案。如果问题中提到的数据是被返回的数据，那么 accountData.map 应该可以工作。 - dance2die

Answer 2

试试这个

使用Object.keys(accountData).map((e) => 进行迭代，返回以下内容：

ID: {e.id}

Name: {e.customer}

- jose alejandro sanchez mariño

Answer 3

Object.keys(accountData)会返回数组的键，例如 0,1,2。只需用accountData.map迭代遍历数组。

- Matt Aft

Answer 4

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

- Jackkobec

---

请记住，在React中使用映射函数的索引来定义键是一种反模式。https://reactjs.org/docs/lists-and-keys.html - Mike Abeln

你说得对。假设id是唯一的。代码已经重构过了。 - Jackkobec

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

就这些了。

- TopW3