ReactJS通过Object映射

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代替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()用于数组。

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

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

Answer 3

当您尝试映射对象键时是否会出错，或者是否会抛出其他内容。

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

{subjects[item]}

您需要使用{subjects[i]}而不是nav-tab，因为它指的是对象的键。如果您寻找科目[i]，您将得到未定义。

Answer 4

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

var coll = db['your_prefix:_User'];

在您的情况下：

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

Answer 5

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

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

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

Answer 6

我使用下面的 summary 来轻松输出键和值：

> summary(df)
       x               V2              V3
 Min.   :0.100   Min.   :1.072   Min.   :0.05000
 1st Qu.:0.325   1st Qu.:1.253   1st Qu.:0.09875
 Median :0.550   Median :1.465   Median :0.19400
 Mean   :0.550   Mean   :1.493   Mean   :0.27160
 3rd Qu.:0.775   3rd Qu.:1.712   3rd Qu.:0.38050
 Max.   :1.000   Max.   :2.000   Max.   :0.74100

Answer 7

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