1

私は React でいくつかのチュートリアルに従ってきましたが、自分でアプリケーションを構築し始めています。コンポーネントに関する状況に遭遇しましたが、このシナリオのベスト プラクティスがあるかどうか疑問に思っています。注意してください、私は反応レールを使用しているだけです。今のところフラックスなどはありません。

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. 空の配列のshoutプロパティにアクセスしようとすると、Renderが呼び出されてエラーが発生します
  3. ComponentDidMount が呼び出され、Ajax 呼び出しから受信したデータにシャウトの状態を設定します。**ComponentWillMount でこれを実行しようとすると、エラーが発生します **
  4. 状態が変化したため、Render が再度呼び出されますが、今回はshouts[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

Flux を使用しない場合、実装はこの問題を回避する数少ない方法の 1 つです。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;
}

このようにすることの利点は、長期的には読者にとってより明確になる可能性のあるリターンが1つしかないことです.

于 2015-10-23T20:08:51.207 に答える
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 に答える