Question

我一直在跟着React的一些教程，我开始自己构建一个应用程序。我遇到过关于组件的情况，我想知道这个场景是否是最佳实践。请注意，我只是使用react-rails;现在没有流量或其他任何东西。

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

以下是我要做的事情:(为简单而剥离）

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将shouts设置为空数组
由于尝试访问空数组
调用ComponentDidMount并将shouts的状态设置为从ajax调用接收的数据。 **当我尝试在ComponentWillMount **
Render再次被调用，因为状态已经改变，但这次喊叫[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语句中执行此操作？

谢谢！

Answer 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;
}

这样做的好处是，您只需要一次返回，从长远来看，这可以使读者更清楚。

Answer 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对拨打电话的组件进行了调用。应从那里开始按预期工作。

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

2 个答案: