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

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

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

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

1. 数组中的项目，
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 2

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

在映射对象的情况下，您可以这样做：

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

Answer 3

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

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

Answer 4

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

Answer 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]}因为它指的是对象的键。 如果您查找 subject[i]，您将得到未定义。

Answer 6

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

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

我希望它可以帮助帖子的所有者或其他路过的人。

Answer 7

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

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

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