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

Question

我有这样的回复：

我想显示这个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>
))}

Answer 1

您收到此错误是因为您的变量 subjects 是 Object 而不是 Array，您只能将 map() 用于数组。

如果是映射对象，您可以这样做：

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

Answer 2

当您尝试通过对象键进行映射时是否遇到错误，或者它是否会抛出其他内容。

另请注意，当您要通过键进行映射时，请确保正确引用对象键。就像这样：

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

您需要使用 {subjects[item]} 而不是 {subjects[i]} 因为它指的是对象的键。如果你寻找 subjects[i] 你会得到 undefined.

Answer 3

当调用 Object.keys 时，它 returns 对象键的数组。

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

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

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

当你想获取数据时，你需要使用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>
))}

Answer 4

使用 Object.keys() 映射对象的键：

{Object.keys(yourObject).map(function(key) {
  return <div>Key: {key}, Value: {yourObject[key]}</div>;
})}

Answer 5

使用Object.entries()函数。

Object.entries(object) return:

[
    [key, value],
    [key, value],
    ...
]

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

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

Answer 6

也可以使用Lodash直接将对象转为数组：

_.toArray({0:{a:4},1:{a:6},2:{a:5}})
[{a:4},{a:6},{a:5}]

你的情况：

_.toArray(subjects).map((subject, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">Name: {subject[name]}</span>
    </li>
))}

Answer 7

我不确定为什么 Aleksey Potapov 将答案标记为删除，但它确实解决了我的问题。使用 Object.keys(subjects).map 给了我一个包含每个对象名称的字符串数组，而 Object.entries(subjects).map 给了我一个包含所有数据的数组就是这样我希望能够做到这一点：

const dataInfected = Object.entries(dataDay).map((day, i) => {
    console.log(day[1].confirmed);
});

希望对post的主人或路过的人有所帮助。

Answer 8

我使用下面的Object.entries来轻松输出键和值：

{Object.entries(someObject).map(([key, val], i) => (
    <p key={i}>
        {key}: {val}
    </p>
))}

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

How can I map through an object in ReactJS?

javascript

jsx

reactjs