如何使用React.js在JSX中循環對象

所以我有一個React.js組件，並且我想通過導入的對象循環來添加HTML選項。以下是我試過了，這既是醜陋和不工作：如何使用React.js在JSX中循環對象

import React from 'react'; 
import AccountTypes from '../data/AccountType'; 

const AccountTypeSelect = (props) => { 
    return (
    <select id={props.id} className = {props.classString} style={props.styleObject}> 
     <option value="nothingSelected" defaultValue>--Select--</option> 
     { 
      $.each(AccountTypes, function(index) { 
       <option val={this.id}>this.name</option> 
      }) 
     } 
    </select> 
); 
}; 

export default AccountTypeSelect;

我在控制檯收到此錯誤從上面的代碼：

invariant.js 4599：38 - 未捕獲不變衝突？對象作爲React子項無效（找到：包含鍵{id，name，enabled，additionalInfo}的對象）。如果您打算渲染一組兒童，請改用數組，或者使用React附加組件中的createFragment（object）來包裝對象。檢查AccountTypeSelect的渲染方法。

我是否真的需要將每個對象轉換爲數組或使用createFragment包裝來使用它？這種情況的最佳做法是什麼？

來源

2016-08-18 Tylerlee12

代替$.each使用map：

{AccountTypes.map(function(a) { 
    return (
     <option key={a.id} val={a.id}>{a.name}</option> 
    ); 
})}

來源

2016-08-18 16:19:19 Kevin

什麼是關鍵屬性 - 爲什麼我需要使用？看起來很奇怪，我需要添加一個看似任意的屬性，當我想要做的就是放置一個簡單的選項標籤。 – Tylerlee12

關鍵屬性在「調整」下描述：https：//facebook.github.io/react/docs/multiple-components.html。但基本上是要確保當你的子元素是動態生成的時候能夠正確地更新DOM（我知道一個弱解釋，但我不想在評論中重複反應文檔）。在這方面，我使用循環變量的形式很差，所以我已經更新了答案。抱歉! – Kevin

您應該使用地圖循環：

{AccountTypes.map((accountType) => 
    <option value={accountType.id}>{accountType.name}</option>)}

來源

2016-08-18 16:22:36

呈現兒童的名單，你必須添加key屬性爲每個孩子等反應過來將呈現他們正確。試試這個：

與JQuery地圖（很好的功能編程）

{ 
     $.map(AccountTypes, function(type,index) { 
      return <option key={type.id} val={type.id}>type.name</option> 
     }) 
    }

隨着法線貼圖：

{AccountTypes.map((type) => { 
    return <option key={type.id} 
        val={type.id}> 
      {type.name} 
      </option> 
)}

來源

2016-08-18 16:25:31

我建議在鍵值中使用某種前綴以避免重複鍵和相應的警告和錯誤，如果您呈現多個集合。 – Carlos

第一個例子不起作用，因爲'$ .each'不會返回任何東西（或者至少不是正確的東西）。 –

回調函數返回的內容無關緊要'$ .each'在這裏使用是錯誤的方法。請參閱文檔：https：//api.jquery.com/jquery.each/。 –

如何使用React.js在JSX中循環對象

回答

相關問題