如何在我的反应组件中显示从快速路由器发送的数据？答案

【问题标题】：How do I display data sent from the express router in my react-component?如何在我的反应组件中显示从快速路由器发送的数据？
【发布时间】：2015-11-18 22:12:32
【问题描述】：

路由代码：

router.get('/', function(req, res) {
  res.render('index', {username: req.session['passport']['user']['username']});
}

我想在我的 react 组件中显示这个用户名对象，如下所示：

var Account = React.createClass({
  render: function(){
    return (
      <div>
        {username}
      </div>
    )
  }
});

很明显，上面的结果是一个 'username' is undefined 错误。如何在 react 组件中访问路由器提供的这些数据？

谢谢。

【问题讨论】：

标签： express reactjs

【解决方案1】：

一种常见的模式是在组件挂载时从组件中获取数据。例如，假设某个助手与您的 API 交互并返回一个 Promise。然后您可以执行以下操作：

var Account = React.createClass({
  getInitialState: function() {
    return {
      username: ''
    };
  },

  componentWillMount: function() {
    APIHelper.get('/').then(function(response) {
      this.setState({
        username: response.username
      });
    });
  },

  render: function(){
    return (
      <div>
        {this.state.username}
      </div>
    )
  }
});

【讨论】：