HTTPリクエストでReact Propsを使用する

Question

Reactでpropsを使用して動的REST APIのコンテンツを表示しようとしています。下の例では、http://api.icndb.com/jokes/random/からチャックノリスジョークをランダムに表示するデータを取得しようとしています。残念ながら、私のアプリはエラー500を返します。

これに関するアイデア??

import React from 'react'; 
import request from 'request'; 

const Api = (props) => { 
    return <div> 
      {request(props.api, (error, response, body) => { 
          if(!error && response.statusCode == 200) { 
           return body; 
          } else { 
           return error; 
          } 
         }) 
      } 
     </div>; 
} 

const Default = (props) => { 
    return (<Api api="http://api.icndb.com/jokes/random/"/>); 
}; 
export default Default; 

Answer 1

あなたは間違いなく、renderメソッドでapi呼び出しを行うべきではありません。これを行うための理想的な方法は次のとおりです。

class Api extends React.Component { 

    constructor() { 
    super(); 

    this.state = { 
     data: null 
    } 

    } 

    componentDidMount() { 
    request(this.props.api, (error, response, body) => { 
     if(!error && response.statusCode == 200) { 
      this.setState({data: body}) 
     } else { 
      return error; 
     } 
    }); 
    } 

    render() { 
    const content = this.state.data ? JSON.stringify(this.state.data) : <h3>Loading...</h3> 

    return (
    <div class="content"> 
     {content} 
    </div> 
    ) 
} 
} 

ので、私たちが何をした：

を私たちは、その状態のように、APIからのデータを持っているES6クラスコンポーネントにステートレスな機能性成分を回しました。

データを初期化するときはnullです。コンポーネントがマウントされると、API呼び出しが行われ、呼び出しが完了して結果が返されると、自身の状態が更新され、レンダリングメソッドが再トリガされます。理想的には、レスポンスを解析してUIに正しく入れることができますが、この場合はレスポンスを文字列に変換してDOMにレンダリングします。ここでrender() https://facebook.github.io/react/docs/react-component.html#render

上

情報

https://facebook.github.io/react/docs/react-component.html#componentdidmount

componentDidMount上の情報は、ワーキングペンです： http://codepen.io/finalfreq/pen/xgqMae

私はあなたが使用しているrequest.jsとして異なるAPIライブラリを使用する必要がありました利用可能なcdnがありません