1

我一直在学习一些 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>);            
   }
});

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

  1. 加载时，getInitialState 将喊声设置为空数组
  2. 由于尝试访问空数组上的喊叫属性，渲染被调用并出错
  3. ComponentDidMount 被调用并将喊叫的状态设置为从 ajax 调用接收到的数据。**当我尝试在 ComponentWillMount 中执行此操作时出现错误 **
  4. 由于状态发生了变化，渲染再次被调用，但这次喊叫[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 语句？

谢谢！

4

2 回答 2

0

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

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对发出呼叫的组件的呼叫。它应该从那里按预期工作。

于 2015-10-23T20:46:29.713 回答
0

如果不使用 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;
}

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

于 2015-10-23T20:08:51.207 回答