反応クラスへの呼び出し呼び出しの結果を送信

Question

私は完全なスタックのWeb開発者であることを学ぼうとしています。私はMERNスタックを使うことに決めました。私は私の最初の「フルスタック」アプリケーションを書くことを試みています。しかし、私はget呼び出しからデータを格納し、それをプロパティとしてクラスに送信する方法を理解できないようです。 getコールは、nodejで設定したエンドポイントに到達し、Mongoを呼び出して一連の数値を返します。以下のgetコールは、その配列内の要素の数をconsole.logにすることができます。私はさまざまな方法で試してみましたが、THENの約束から自分のクラスへの番号の取得方法と、クラスに表示する方法を理解できないようです。どんな助けでも大歓迎です！

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const axios = require('axios'); 

//call with npm build 




    var num = axios.get('/api').then(result => { 
        console.log(result.data.length) 
        return result.data.length; 
       }) 

//Only show how many unused coupons are left. 

var Message = React.createClass({ 

    render: function() { 

    return <h1>There are {this.props.number} coupons left!</h1> 

    }//end of of render outer function 
}) 

ReactDOM.render(<Message number={num} />,document.getElementById('content')) 

Answer 1

最初に、api呼び出しは非同期操作です。同期方法を呼び出すことはできません。

そして、axios.get関数は、この値を解決するPromiseを返します。

正しい解決策は、<App />コンポーネントを作成し、componentDidMountライフサイクルコールバックでAPIを呼び出し、成功応答に対応する状態変数を設定し、<Message />コンポーネントがこの変数を提供するコンポーネントをレンダリングします。例で

ルック：

var App = React.createClass({ 
    getInitialState() { 
    return { 
     num: null 
    }; 
    } 

    componentDidMount() { 
    var num = axios.get('/api').then(result => { 
     this.setState({ num: result.data.length }); 
    }); 
    }, 

    render() { 
    if (this.state.num) { 
     return <Message number={this.state.num} /> 
    } 
    return <div /> 
    } 
}); 

ReactDOM.render(<App />,document.getElementById('content'))