関数間に反応変数をバインドする方法はありますか？

Question

同じコード行を入力しないでください。現在のところ、API呼び出しを行うアプリがあります。

render: function(){ 
    var processappkey = localStorage.getItem('yourid'); 
    var weather = new XMLHttpRequest(); 
    var deesfault = "Houston, Texas"; 
    weather.open("GET", "http://apidatafromsomewebsiteq="+deesfault+"&units=imperial&appid="+processappkey, false); 
    weather.send(null); 
    var r = JSON.parse(weather.response); 
    var check = r.main.temp; 
    var theunicorn = r.weather[0].icon; 

    return (<p>{theunicorn}</p>) 
} 

私はこのような何かにこれを分割したい：私は私のアプリではさまざまな分野からのAPIを呼び出すことになる

somecontainer: function(){ 
    var processappkey = localStorage.getItem('yourid'); 
    var weather = new XMLHttpRequest(); 
    var deesfault = "Houston, Texas"; 
    weather.open("GET", "http://apidatafromsomewebsiteq="+deesfault+"&units=imperial&appid="+processappkey, false); 
    weather.send(null); 
    var r = JSON.parse(weather.response); 
    var check = r.main.temp; 
    var theunicorn = r.weather[0].icon; 
}, 

render: function() { 
    {this.somecontainer()} 

    return (
    <p>{theunicorn}</p> 
    ) 
} 

。私はもう一度コードを繰り返しているsetInvervalを含むことは言うまでもありません。

私がそれにいる間、私はこのようなことについてどうやって行くのか知りたいと思います。

render: function() { 
    this.somecontainer(); 
    setInterval(function() { 
    this.somecontainer(); 
    }, 5000); 
} 

しかし、これは別の質問です。最初の問題については洞察していただきたいと思います。

Answer 1

良い質問、かなり簡単な答えです。必要なデータを取得して取得し、コールバック関数を介して結果を返す関数があります。このユーティリティ関数は別のファイルのどこかに置かれ、それをインポートして任意のコンポーネントから呼び出すことができます。次に、関数が返すデータを取得し、コンポーネントの状態にします。

renderメソッドでAPIを呼び出すことはほとんどありません。あなたのアプリに応じて、render()メソッドlotを実行して反応させることができます。コンポーネントが最初にロードされたときに起動させる場合は、componentDidMountを使用します（これはクライアント側でのみ発生し、サーバー側のレンダリングを使用している場合は便利です）。

let counter = 0; 
// separate utility 

function goGetAUnicorn(callback) { 
    // replicate async for demonstration... 
    setTimeout(() => { 
    callback(`I am unicorn picture #${counter++}`); 
    }, 100) 
} 

class Unicorn extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     unicornPicture: '', 
    }; 
    } 

    componentDidMount() { 
    // runs once, client side only 
    goGetAUnicorn(unicornPicture => { 
     this.setState({unicornPicture}); 
    }); 


    // to simulate reusing the same function elsewhere at some other time 
    setInterval(() => { 
     goGetAUnicorn(unicornPicture => { 
     this.setState({unicornPicture}); 
     }); 
    }, 1000) 
    } 

    render() { 
    return (
     <div>Here is your unicorn: {this.state.unicornPicture}</div> 
    ); 
    } 
} 

ReactDOM.render(<Unicorn />, document.getElementById('app')); 

私はちょうどあなたが運ぶ前に応答を待つ必要があることを示すためにsetTimeoutを使用しています。私は実際にコールバックではなく、約束を使用しますが、どちらも機能します。

はここでプレーするjsbinます：https://jsbin.com/lohojo/1/edit?html,js,output