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