React-Rails：使用 ajax 加载初始数组状态答案

【问题标题】：React-Rails: Load initial array state with ajaxReact-Rails：使用 ajax 加载初始数组状态
【发布时间】：2016-01-23 09:48:26
【问题描述】：

我一直在学习一些关于 React 的教程，并且我开始自己构建一个应用程序。我遇到了有关组件的情况，我想知道这种情况是否有最佳实践。请注意，我只是在使用 react-rails；暂时没有助焊剂之类的。

使用一个数组设置初始状态，该数组的值通过 ajax 设置，并在 initial 渲染中显示该数组

这就是我想要做的：（为简单起见）

var ShoutList = React.createClass({
    getInitialState: function(){
       return {shouts: []};
    },
    componentDidMount: function(){
       var component = this;
       $.get('/api/shouts.json', function(data){
          component.setState({shouts: data});
       });
    },
    render: function(){
       return (
          <div>
            {this.state.shouts[0].shout}
          </div>);            
   }
});

所以如果我有这个权利，事情的运行顺序如下：

加载时，getInitialState 将呼喊设置为空数组
由于尝试访问空数组上的喊叫属性，渲染被调用并出错
ComponentDidMount 被调用并将喊叫状态设置为从 ajax 调用接收到的数据。 **当我尝试在 ComponentWillMount 中执行此操作时出现错误 **
渲染被再次调用，因为状态发生了变化，但这次喊叫[0].shout 将包含数据。

所以我在第 2 步出错，我的解决方法如下：

var ShoutList = React.createClass({
    getInitialState: function(){
        return {shouts: []};
    },
    componentDidMount: function(){
        var component = this;
        $.get('/api/shouts.json', function(data){
            component.setState({shouts: data});
        });
    },
    emptyShouts: function(){
        return(<div>No Shouts Yet!</div>);
    },
    shoutsList: function(){
        return(<div>{this.state.shouts[0].shout}</div>);
    },
    render: function(){
        if(this.state.shouts.length > 0){
            return this.shoutsList();
        }else {
            return this.emptyShouts();
        }
    }
});

这完全符合我的需要，但是有没有更好的方法来使用 ajax 设置初始状态的数组值并将其加载到初始渲染中而无需执行此 if 语句？

谢谢！

【问题讨论】：

标签： ruby-on-rails ajax ruby-on-rails-4 reactjs react-rails

【解决方案1】：

如果不使用 Flux，我会说您的实现是解决此问题的少数方法之一。另一种方法是在 render 的返回之前有逻辑：

...
render: function () {
  var renderedShout;
  if (typeof this.state.shouts[0] === "undefined") {
    renderedShout = <div>No Shouts Yet!</div>;
  } else {
    renderedShout = <div>{this.state.shouts[0].shout}</div>;
  }

  return renderedShout;
}

这样做的好处是你只会得到一个回报，从长远来看，这会让读者更清楚。

【讨论】：

【解决方案2】：

如果需要，您可以在预编辑代码中尝试此更改：

var ShoutList = React.createClass({
    getInitialState: function(){
       return {shouts: []};
    },
    componentDidMount: function(){
       var component = this;
       $.get('/api/shouts.json', function(data){
          component.setState({shouts: data});
       }.bind(this), 'json');
    },
    render: function(){
       return (
          <div>
            {this.state.shouts[0].shout}
          </div>);            
   }
});

bind 你的$.get 调用组件进行调用。它应该从那里按预期工作。

【讨论】：