ReactJS地圖通過對象

Question

我有一個這樣的迴應：

我想顯示這個網站中的每個對象的名稱：

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

但它拋出我的錯誤subjects.map is not a function

首先，我必須定義創建一個鍵數組的對象的鍵，我想要循環槽並顯示主題。 ES

我也試過是這樣的：

{ 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((item, i) => (
    <li className="travelcompany-input" key={i}> 
      <span className="input-label">key: {i} Name: {subjects[item]}</span> 
    </li>) 
)} 

Answer 2

，因爲你的拍攝對象是一個對象數組不是你得到這個錯誤，你可以使用地圖（）只針對陣列。在映射對象的情況下，你可以做到這一點 -

{ 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(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]}，因爲它指的是物體的鑰匙。如果你尋找科目[我]你會得到未定義的。