React - レンダリングと反復のコンポーネント

Question

私はオブジェクトの配列をES6マップ関数を使用して反復処理し、<li>リストアイテムに更新しています。ログが正しく印刷されています。しかし、リスト項目はUIに表示されません。

コード：ここで

renderListItems() { 
    var GameScore = Parse.Object.extend("Test"); 
    var query = new Parse.Query(GameScore); 
    query.find({ 
     success: function (results) { 
      console.log("Successfully retrieved " + results.length); 
      return results.map((task, i) => { 
       console.log("-> " + task.get("name")); 
       return (<li key={i}> 
         {task.get("name")} 
        </li> 
       ); 
      }); 
     }, 
     error: function (error) { 
      console.log("Error: " + error.code + " " + error.message); 
     } 
    }); 
} 

私の方法をレンダリングで、私は答えは簡単です

render() { 
    return (

      <div> 
       <ul> 
        {this.renderListItems()} 
       </ul> 
      </div> 
    ); 
} 

Answer 1

'レンダリング' で、このrenderListItemsメソッドを呼んでいる：あなたのrenderListItems()方法は戻りません。何でも。

データフェッチロジックは、レンダリングメソッドの一部であってはなりません。コンポーネントがマウントされた後にデータを取得する場合は、そのロジックをすべてライフサイクルメソッドcomponentDidMount（）に抽出する必要があります。それ以外の場合は、クリックするとデータを取得する関数を呼び出すボタンを作成する必要があります。

あなたは、コンポーネントの状態にデータを格納し、単にrenderListItems（）のために、以下の操作を行うことができます。

renderListItems() { 
    return this.state.results.map((task, i) => { 
     console.log("-> " + task.get("name")); 
     return (<li key={i}> 
       {task.get("name")} 
      </li> 
    ); 
    }); 
} 

側の注意点として、私は、各<li>の主要な小道具のための配列のインデックスを使用することはありません。あなたはそれについてgoogleすることができます。代わりに、task.idのような一意の識別子を使用します（ある場合）。