如何通过ReactJS中的对象进行映射？

编程基础网前端问题

2022-01-01

How can I map through an object in ReactJS?(如何通过ReactJS中的对象进行映射？)

本文介绍了如何通过ReactJS中的对象进行映射？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我得到的响应如下：

我要在此HTML中显示每个对象的名称：

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}

但它引发错误subjects.map is not a function。

首先，我必须定义对象的键，它将在其中创建一组键，我要在其中循环并显示subject.names。

我还尝试了这个：

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}

推荐答案

调用Object.keys时返回对象键的数组。

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

当您调用Array#map时，您传递的函数将为您提供两个参数；

数组中的项，
项目的索引。

当您想要获取数据时，需要使用item(或者在下面的示例中使用keyName)，而不是使用i

{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}

这篇关于如何通过ReactJS中的对象进行映射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react