ReactJS 通过 Object 映射答案

【问题标题】：How can I map through an object in ReactJS?ReactJS 通过 Object 映射
【发布时间】：2017-04-09 18:52:11
【问题描述】：

我有这样的回应：

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

【问题讨论】：

谢谢你说你知道答案？
这里小心的一句话。对象中的键顺序没有保证，如果有其他东西修改了对象，它可能会以不同的顺序返回键。这可能导致内容转移。

标签： javascript reactjs jsx

【解决方案1】：

当调用Object.keys 时，它会返回一个对象键的数组。

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

【讨论】：

并通过另一个字段数组进行映射
有理由不使用 Object.values 代替吗？
@MadOgre 不是真的 - 这是基于 OP 当前的解决方案。他们使用Object.keys

【解决方案2】：

您收到此错误是因为您的变量 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>
    ))
}

【讨论】：

【解决方案3】：

使用Object.entries()函数。

Object.entries(object)返回：

[
    [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>
))}

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

当您尝试通过对象键进行映射时，您会收到错误，还是会抛出其他错误。

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

{ 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]}，因为它引用对象的键。如果您查找主题[i]，您将得到未定义。

【讨论】：

【解决方案6】：

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

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

【讨论】：

这是 정형석 和其他人早先回答的重复。

【解决方案7】：

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

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

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

【讨论】：

您可以使用([key, val], i) 代替(day, i) 并在您的代码中直接使用val。

【解决方案8】：

您也可以使用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>
))}

【讨论】：