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

Question

所以我有一個React.js組件，我想循環遍歷我導入的對象以向其添加HTML選項。 這是我嘗試過的，既丑陋又無效：

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 - Uncaught Invariant Violation：對象無效作為React子對象（找到：具有鍵{id，name，enabled，additionalInfo}的對象）。 如果您要渲染子集合，請使用數組，或使用React附加組件中的createFragment（object）包裝對象。 檢查AccountTypeSelect的render方法。

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

Answer 1

而不是$.each使用map ：

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

Answer 2

注意事項：

您的數據位於Object中，而不是數組中：因此要遍歷它，您必須使用Object.keys（yourObject）.map（）而不是yourObject.map（）

考慮到這一點; 這是解決方案

var user = {
     fname:'John',
     lname : 'Doe',
     email:'test@test.com'
}

class App extends Component {
  render() {
    return (
      <p>
      <ul>
        {
          Object.keys(user).map((oneKey,i)=>{
            return (
                <li key={i}>{user[oneKey]}</li>
              )
          })
        }

      </ul>    
      </p>
    );
  }
}

Answer 3

你應該使用map循環：

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

Answer 4

要呈現子項列表，必須為每個子key添加key屬性，以便React正確呈現它們。請嘗試：

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