サーバーサイドのReactコンポーネントでコールバック値を使用するにはどうすればよいですか？

Question

サーバーサイドのReactを使用してMongoデータベースのプレーヤーのリストを表示するのに問題があります。

私の目標は、私は、高度なソリューションの実装を開始する前に、基礎となる概念を学びたいと思いますので、mongodbとreactは別に外部ライブラリを使用ししないです。

私のコードでは、モジュール（players.js）が必要で、index.jsxで定義されたコールバックを呼び出し、Mongoのクエリ結果を処理する必要があります。これらのプロセス結果は、コンポーネントによってアクセス可能でなければなりません。

ここにある：

players.js

var MongoClient = require('mongodb').MongoClient; 

var url = 'mongodb://localhost/collection'; 
var database; 
var players; 

module.exports = function(callback) { 

    // Initialize collection 
    MongoClient.connect(url, function(err, db) { 
     database = db; 
     database.collection('players', findPlayers); 
    }); 

    // This named callback function is here in case 
    // I want to do anything else with the collection 
    function findPlayers(err, collection) { 
     collection.find({}, getCursor); 
    } 

    function getCursor(err, cursor) { 
     cursor.toArray(function(err, players) { 
      // Invoke callback with err and players array 
      callback(err, players); 

      // Close Mongo connection 
      database.close(); 
     }); 
    } 
} 

index.jsx

var React = require('react'); 
var players = require('./players'); 

// call module and pass processPlayers function 
var competitors = players(processPlayers); 

// with the query results, return some neat JSX code 
function processPlayers(err, results) { 
    return results.map(function(player) { 
     return (
      <tr> 
       <td>{ player.rank }</td> 
       <td>{ player.name }</td> 
      </tr> 
     ) 
    }); 
} 

// Create index component class 
var Index = React.createClass({ 
    render: function() { 
     return (<main><table>{ competitors }</table></main>); 
    } 
}); 

// Export component 
module.exports = Index; 

私はindex.jsxに、私は未定義の復帰へcompetitorsを設定してることを理解し、私はこだわっていますので、それはです。マップ結果にcompetitorsを設定するにはどうすればよいですか？

また、私はではありません。約束や非同期ライブラリを探しています。 私は基本と適切なコード構造を学びたいと思っています。提供されていれば、関連するライブラリのソースコードを見て嬉しいです。

ありがとうございました！

Answer 1

私は私の質問に答えを掲示しています。

サーバー側のReactに使用していたライブラリはhereです。

ドキュメントでは、.jsxのビューが同期していることが判明し、ルートでデータベースクエリの結果を渡すことをお勧めします。このデータは、this.propsを介してコンポーネントのプロパティとして公開されます。

だから... ...私は自分のルートファイルに行き、このから元のコード変更：これに

module.exports = function (req, res) { 
    res.render('index'); 
} 

：

var players = require('../helpers/players'); 

module.exports = function (req, res) { 
    // call to module with anonymous function callback 
    players(function(err, results) { 
     if (err) return console.log(err); 
     // using arg from anonymous function and 
     // passing as local variable 
     res.render('index', {'players': results}); 
    }) 
}; 

をそして今、私のコンポーネントは、この方法は次のようになり、レンダリング..

render: function() { 

    function createPlayerRows(player) { 
     return (
      <tr> 
       <td>{ player.rank }</td> 
       <td>{ player.name }</td> 
      </tr>   
     ); 
    } 

    // `players` property provided by route 
    // mapped array using callback function which 
    // creates an array of JSX elements 
    var players = this.props.players.map(createPlayerRows); 

    return (<main><table>{ players }</table></main>); 
} 

誰かを助けるかどうかわかりませんが、私は安心しています。