HTTPデータを取得して404を処理する最も良い方法は？

Question

私はReactにはかなり新しいので、データを取得する最良の方法はわかりません。私は国のデータにアクセスすることができないよう

var Country = React.createClass({ 

    componentDidMount: function() { 
    var _this = this, 
     country = _this.props.params.country; 

    Axios.get('http://URL/?search=' + country) 
     .then(function(result) { 
     _this.setState({ 
      country: result.data[0] 
     }); 
     }); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    var country = this.state.country; 
    return (
     <div> 
     <h1>{country.name}</h1> 
     </div> 
    ); 
    } 

}); 

：私は/country/japanのようなページのURLを持っており、これが私のコンポーネントです。これを行う適切な方法は何ですか？また、どのように404を引き起こすでしょうか？

Answer 1

私はまず、プレゼンテーションコンポーネントとコンテナコンポーネントの違いを理解しています。

表現的要素：

• は物事がどのように見えるかと懸念しています。
• 内部にプレゼンテーションコンポーネントとコンテナコンポーネントの両方を含めることができ、通常は独自のDOMマークアップとスタイルを持っています。多くの場合、この.props.childrenを介して封じ込めることができます。
• Fluxのアクションやストアなど、アプリケーションの他の部分に依存しないでください。
• データのロード方法または変更方法を指定しないでください。
• データとコールバックは、プロップ経由でのみ受信します。
• まれに独自の状態を持ちます（そうしたときは、 データではなくUI状態です）。
• 彼らは状態、
  ライフサイクルフック、またはパフォーマンスの最適化を必要としない限り、機能部品として書かれています。
• 例：ページ、サイドバー、ストーリー、UserInfo、リスト。

コンテナコンポーネント：

• は、物事がどのように働くかと懸念しています。
• プレゼンテーションとコンテナの両方のコンポーネントが含まれている可能性がありますが、 には通常、div35を囲む の部分を除いて、独自のDOMマークアップはありません。
• プレゼンテーションまたはその他のコンテナ コンポーネントにデータと動作を提供します。
• Fluxアクションを呼び出して、 プレゼンテーションコンポーネントにコールバックとして提供します。
• 多くの場合、データソースとして機能するため、ステートフルです。
• 通常、React Reduxのconnect（） 、RelayのcreateContainer（）、Flux UtilsのContainer.create（） などの上位コンポーネントを使用して生成されます。
• 例：UserPage、FollowersSidebar、StoryContainer、 FollowedUserList。

hereを確認できます。これは、APIコールをトリガーする方法を理解するのに役立ちます（コンテナー内にある必要があります）。

だから今、あなたのコードに来ます。私はコンテナにあなたのAPIコードを移動し、コンテナ内のコンポーネントを呼び出すと言うでしょう。

var CountryContainer = React.createClass({ 


componentDidMount: function() { 
     var _this = this, 
     country = _this.props.params.country; 

    axios.get('http://URL/?search=' + country) 
     .then(function(result) { 
     //200-300 response codes 
     //update you state here with say variable data 
     .catch(function(error){ 
      //400+ response codes 
     } 
     }); 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    return (
     <Country data={this.state.data} /> 
    ); 
    } 

}); 

私はaxiosのドキュメントに行くことをお勧めします。彼らはAPIコールが失敗し、それを処理する方法を明確に述べています:)