React.JS - 動的レンダリングリストに値が表示されない

Question

previous questionの問題が最近解決され、新しい配列の値がレンダリングされたドロップダウンリストに表示されないという新たな問題が発生しました。私の前の質問で私に与えられた答えを使って、リストに正しいキーを入力しますが、キー値ではなく配列からの値に興味があります。私は以下の私の修正されたレンダリングメソッドと、私のクラスのプロトタイプが私のアプリの別のコンポーネントから受け取ったクラスデータ型の例を挙げました。

編集： 私は正確に何をしたいのですか？コードを試してみると、「e.mapは関数ではありません」というエラーがコンソールに表示されます。私は以下でも試したコードを掲載しました。

編集2：詳細はわかりませんが、コンポーネントが最初にマウントされたとき（コンポーネントが以下のマウント機能を実行したとき）、AJAXリクエストを介してSQL Serverデータベースからデータを取得しています。私はサーバー側のものを.Net/C＃で行い、そのデータをxhttp.responseTextとstring.prototype.splitを経由してクライアント側の配列に戻します。デバッグを高速化するために、毎回データベース呼び出しに依存しないようにajaxリクエストをスキップしています（したがって、なぜ404エラーがチェックされるのか）。代わりに、明示的に宣言された配列 'n'をクラスの状態。私のDropdownコンポーネント（問題のコンポーネント）には、クラスの現在の状態（上で説明したように設定されている）に関連付けられた「classes」という名前のプロパティがあり、そのコードも以下に掲載されています。

クラス例：

['justin','tom','bob'] 

は、Renderメソッドを：

render: function(){ 

    return(
     <div> 

     <select onChange = {this.change}> 
     { 
      Object.keys(this.props.classes).map((value, key) =>{ 

      return <option key = {key}>{value}</option> 
      } 
     )} 
      </select> 
     </div> 

    ) 

} 



}); 

新しいコードは試してみました：

export default React.createClass({ 

    getInitialState: function(){ 
     return{classes: this.props.classes } 
    }, 

    render: function() { 
     var names = this.state.classes; 
     console.log(names); 
     return (
      <select> 
       {names.map(function(name, index){ 
        return <option key={ index }>{name}</option>; 
        })} 
      </select> 
     ) 
    } 
}); 

編集2コード：

componentDidMount: function(){ 
     var xhttp; 
     var myStr; 
     var user = window.x; 
     console.log("the current user is "+ user); 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 || xhttp.status == 404) { 
    document.getElementById("test").innerHTML = xhttp.responseText; 
    myStr = xhttp.responseText; 
    //n = myStr.split("\n"); 
    n = ['justin', 'earl', 'samuels', 'tom']; 
    console.log(n); 
    this.setState({ classes: n }); 
    } 
    }.bind(this); 
    xhttp.open("GET", "/portals/0/js/hello.aspx?q="+user, true); 
    xhttp.send(); 
    }, 

を

ドロップダウンコンポーネント：

<Dropdown classes = {this.state.classes} /> 

Answer 1

非同期呼び出しをシミュレートするためのsetTimeoutと私のworking exampleを参照してください。

重要な変更はあなたがprops代わりのstateから名前を取得する必要があることです。

render: function() { 
    var names = this.props.classes; 
    console.log(names); 
    return (
     <select> 
      {names.map(function(name, index){ 
       return <option key={ index }>{name}</option>; 
       })} 
     </select> 
    ) 
} 

次のコード：

export default React.createClass({ 

    getInitialState: function(){ 
     return{classes: this.props.classes } 
    }, 

    render: function() { 
     var names = this.state.classes; 
     console.log(names); 
     return (
      <select> 
       {names.map(function(name, index){ 
        return <option key={ index }>{name}</option>; 
        })} 
      </select> 
     ) 
    } 
}); 

はanti-patternです。 getInitialStateは、コンポーネントが最初に作成されたとき（classes propが空の配列の場合）にのみ呼び出されるため、非同期呼び出しが成功した後にクラスprop（サーバーからのデータを含む配列）を受け取ったときにコンポーネントの状態は更新されませんでした。

Answer 2

私の友人Chrisは本当に自然の中でトライバルだった答えを私にくれました。基本的に、私はObject.keysを使用していたので、実行時に値ではなく特定のキーだけを取得していました。値を取得するために、追加する必要があったのは、私のオプションJSXタグの値を期待していた{this.props.classes[value]}でした。フルコードは以下の通りです。

オブジェクトを使用したレンダリング方法。キー：

render: function(){ 

    return(
     <div> 

     <select onChange = {this.change}> 
     { 
      Object.keys(this.props.classes).map((value, key) =>{ 

      return <option key = {key}>{this.props.classes[value]}</option> 
      } 
     )} 
      </select> 
     </div> 

    ) 

}