フェッチAPIのデータを反応させて表示する

Question

リアクションを使用してAPI（JSON）のデータをページに表示する簡単なWebサイトを開発しています。

私はfetch（）APIを使用しています。

私はAPIからデータを取得し、それを 'App'コンポーネントの状態に設定できましたが、手動で作成したテーブルと行のコンポーネントを渡すことはできません。

class App extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = {ticker: {}, volume: {}} 
    this.loadData = this.loadData.bind(this) 
    this.loadData() 
    } 

    loadData() { 
    fetch(ticker) 
      .then((resp) => resp.json()) 
      .then((data) => { 

      this.setState({ 
       ticker: data 
      }) 
      }) 
      .catch((err) => { 
      console.log(err) 
      }) 
    fetch(volume) 
      .then((resp) => resp.json()) 
      .then((data) => { 

      this.setState({ 
       volume: data 
      }) 
      }) 
      .catch((err) => { 
       console.log(err) 
      }) 
    } 


    render() { 
    return (
     <div> 
     <Navbar /> 
     <div className='container'> 
      <div className='align'> 
      <div className='element' /> 

      </div> 
      <Table volume={this.state.volume} ticker={this.state.ticker} /> 

     </div> 
     </div> 

    ) 
    } 
} 

ボトムライン： IデータとAPIを持って、私は、行成分を有する3つの部品表を有します。 は、私はその後、再描画されます反応して、あなたがcomponentDidMountにAJAX呼び出しを行う場合は、この

<Row img='eth' name='Ethereum' price='' volume='' change='' marketCap='' /> 

Answer 1

あなたのコンストラクタ：データをフェッチするために

constructor (props) { 
    super(props); 
    this.state = {ticker: {}, volume: {}} 
    this.loadData = this.loadData.bind(this); 
    } 

あなたは、このように、componentDidMountまたはcomponentWillMountとして、ライフサイクルのコンポーネントを使用することが常に必要があります。

componentDidMount(){ 
    this.loadData() 
} 

そして、あなたの状態では、データを持つことになります。このように、小道具として部品にTableコンポーネントからそれを渡すに続いて

render(){ 
    return(
     <Table volume={this.state.volume} ticker={this.state.ticker} /> 
    ) 
} 

：あなたのrender方法で

はTableコンポーネントに小道具としてそれを渡すあなたが持っている場合は

render(){ 
    return(
    <Row img='eth' name='Ethereum' price='' volume={this.props.volume} change='' marketCap='' /> 
    ) 
} 

オブジェクトの配列：

this.state = { 
    volume: [ {name: "One", size: 1 }, {name: "Two", size: 2 }, ..... ] 
} 

配列をループし、オブジェクトごとにコンポーネントを表示する必要があります。私は推測起こっていただきました！

render(){ 
    return (
     <div>{this.props.volume.map(vol => <Row img='eth' name='Ethereum' price='' volume={vol} change='' marketCap='' />) }</div> 
    ) 
} 

Answer 2

のように見える行のコンポーネント で変数を表示したい場合に状態変化（https://facebook.github.io/react/docs/react-component.html#componentdidmount）。しかし、依頼が解決されてRerendersがReactされるまで、volumeとtickerの小道具は空になると予想する必要があります。