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

使用Object.keys（）映射对象的键：

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

Answer 3

你得到这个错误，因为你的变量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 4

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

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

{ 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]你将得到未定义。