Ajaxリクエストは反応レンダリング機能に表示されません

Question

私のAxiosの約束の結果がレンダリング機能に表示されない理由はわかりません。ところで、私はcreate-react-appツールを使用しています。

_getPrice() { 
const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'; 
axios.get(url) 
.then(function (response) { 
    //console.log(response.data.data.amount); 
    let prices = response.data.data.amount; 
    return prices; 
}) 
} 

render() { 
return(<div><h3> {this._getPrice()} </h3></div>); 
} 

Answer 1

コンポーネントのいずれかstate又は成分変化のpropsを再レンダリングのみ反応します。レンダリングサイクル中にデータが変更され、それらの変数と対話しない場合、変更は表示されません。

次のように、状態にあなたの約束の結果を保存することができます：

getInitialState() { 
    return {prices: undefined} 
} 

componentDidMount() { 
    const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'; 
    axios.get(url) 
    .then(function (response) { 
     //console.log(response.data.data.amount); 
     let prices = response.data.data.amount; 
     this.setState({prices: prices}); 
    }.bind(this)) 
} 

render() { 
    return(<div><h3> {this.state.prices} </h3></div>); 
} 

Answer 2

最初のあなたは、レンダリング機能でお返しに関数を呼び出すカント、あなたのビューを更新したい場合は、状態や小道具を更新する必要があります。..サーバーにデータを要求する場合。

Answer 3

、要求は非同期で、これはあなたの現在の実装ではあなたが約束を戻ってきている、と言われてより、サーバが応答すると、ブラウザが実行を継続するための時間がかかることを意味します_getPriceの機能を使用し、サーバーが応答すると、データで何もしていません。

第二の問題は、状態や小道具の変更がある場合にのみコンポーネントを再レンダリングします反応することで、あなたの現在の実装では、あなたはそれのいずれかを変更していません。

は、ここではそれを動作させるためにそれを行うために必要な方法のサンプルです。

class YourComponent extends Component { 
    state = { 
    prices: 0, 
    }; 

    componentDidMount() { 
    const url = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'; 
    axios.get(url) 
     .then((response) => { 
     let prices = response.data.data.amount; 
     this.setState({ prices }); 
     }); 
    } 

    render() { 
    const { prices } = this.state; 

    return(
     <div> 
     <h3> {prices} </h3> 
     </div> 
    ); 
    } 
} 

幸運！