Wie Objekt in JSX mit React.js durchlaufen

Question

So habe ich eine React.js-Komponente, und ich möchte ein Objekt durchlaufen, das ich importieren, um HTML-Optionen hinzuzufügen. Hier ist, was ich versucht, die beide hässlich ist und funktioniert nicht:

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; 

ich diesen Fehler empfangen in der Konsole aus dem obigen Code:

invariant.js 4599: 38 - Uncaught unveränderliche Verletzung?: Objekte sind nicht als React-Kind gültig (gefunden: Objekt mit Schlüsseln {ID, Name, aktiviert, Zusatzinfo}). Wenn Sie eine Sammlung von untergeordneten Elementen rendern möchten, verwenden Sie stattdessen ein Array oder wickeln Sie das Objekt mithilfe von createFragment (Objekt) aus den React-Add-Ons um. Überprüfen Sie die Rendermethode AccountTypeSelect.

Muss ich wirklich jedes Objekt in ein Array konvertieren oder es mit createFragment umhüllen, um es zu verwenden? Was ist die beste Vorgehensweise für diesen Fall?

Answer 1

Statt $.each Verwendung map:

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

Answer 2

Sie sollten Karte Schleife verwenden:

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

Answer 3

für eine Liste von Kindern zu machen, müssen Sie key Attribut für jedes Kind hinzufügen, so reagiert machen sie richtig. Versuchen Sie Folgendes:

Mit JQuery Karte (gut für die funktionale Programmierung)

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

Mit normaler Karte:

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