web-dev-qa-db-ja.com

React.jsを使用してJSXでオブジェクトをループする方法

したがって、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-キャッチされない不変の違反：オブジェクトはReact子として検出されません（見つかった：キー{id、name、enabled、additionalInfo}を持つオブジェクト））。子のコレクションをレンダリングするか、代わりに配列を使用するか、ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップします。AccountTypeSelectのレンダリングメソッドを確認してください。

実際に各オブジェクトを配列に変換する必要がありますか、それを使用するにはcreateFragmentでラップする必要がありますか？この場合のベストプラクティスは何ですか？

javascriptreactjsreact-jsxjsx
10
twilco

の代わりに $.eachmapを使用：

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

注意点：

データは配列ではなくObjectにあります。したがって、それをループするには、yourObject.map（）の代わりにObject.keys（yourObject）.map（）を使用する必要があります

これを考慮して ;これが解決策です

var user = {
     fname:'John',
     lname : 'Doe',
     email:'[email protected]'
}

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

      </ul>    
      </p>
    );
  }
}
13
Daggie Blanqx

ループするにはマップを使用する必要があります：

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

子のリストをレンダリングするには、各子に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>
)}
0
Phi Nguyen