JSONレスポンスに基づいて反応コンポーネントを実装する方法を教えてください。

Question

var prices = []; 
     $.getJSON("http://www.asterank.com/api/asterank?query={%22neo%22:{%22$lt%22:%22Y%22},%20%22price%22:{%22$gt%22:100000000}}&limit=1000", function(data) { 
     $.each(data, function(key,value) { 
      prices.push(value.price); 
     }); 
     }); 

var App = React.createClass({ 
    render() { 

    return(
    <div className="app"> 
     <div> 
     {console.log("logging price array")} 
     {console.log(this.props.priceData)} 
     {this.props.priceData.map(p => <PriceColumn price={p} />)} 
     </div> 
    </div> 
    ) 
    } 
}); 

var PriceColumn = React.createClass({ 
    render() { 
    return(
    <div> 
     <h4>{this.props.price}</h4> 
    </div> 
    ) 
    } 
}) 

ReactDOM.render(<App priceData={prices}/>, document.getElementById('container')); 

反応コンポーネントにjsonレスポンスを設定しようとしています。これは私がこの分野でのデータポイントにアクセスしようとするたびに、私は未定義の取得

Array[871] 
[0 … 99] 
0: 
525905281.52797025 
1: 
604514917.0552349 
2: 
696637551.9520638 
3: 
875462960.8222823 
4: 
1267502400 
5: 
1332894080 
6: 
1467819274.5386994 
7: 
1498253120 
8: 
1703699200 
9: 
1743786240 
10: 
1864047360 
11: 
2725918720 
12: 
3191380043.7561345 
13: 
3652885251.1255836 
14: 
4587566603.506 

「this.props.priceData」のはconsole.logの短い抜粋です。助けてくれてありがとう！

Answer 1

$ .getJSONは非同期なので、React.renderメソッドで価格を使用するときにコールバックは実行されません。より良いアプローチは、コンポーネント自身が呼び出しを担当するようにし、返された値をコールバックで状態に格納することです。例えば。

var App = React.createClass({ 
    getInitialState() { 
    return { 
     priceData: [] 
    } 
    }, 

    componentWillMount() { 
    const apiUrl = "http://www.asterank.com/api/asterank?query={%22neo%22:{%22$lt%22:%22Y%22},%20%22price%22:{%22$gt%22:100000000}}&limit=1000"; 

    $.getJSON(apiUrl, data => { 
     this.setState({ 
      priceData: data.map(item => item.price) 
     }); 
     });  
    }, 

    render() { 
    return(
     <div className="app"> 
     <div> 
      {this.state.priceData.map(p => <PriceColumn price={p} />)} 
     </div> 
     </div> 
    ) 
    } 
}); 

var PriceColumn = React.createClass({ 
    render() { 
    return(
    <div> 
     <h4>{this.props.price}</h4> 
    </div> 
    ) 
    } 
}) 

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

無関係な注記では、Reactアプリケーション内でJQueryを使用するのは一般的に不要です。あなたのAJAX呼び出しでのみ使用している場合は、サポートされていないブラウザの場合はbrowser fetch apiとpolyfillを使用するか、Axiosなどのより軽量なライブラリを使用します。

Answer 2

あなたのコードに問題があなたのデータを受信したときに、レンダリングdoesntのコンポーネントを反応させるのである、ReactDOM.renderが呼び出されたときにのみレンダリングし、価格は

はので、この

// you can use promises too instead of simply a callback argument 
fetchPrices(callback) { 
    $.getJSON("<api_endpoint>", function(data) { 
    var result = Object.keys(data).map(function(key) { 
     return data[key].price; 
    }); 

    callback(result); 
    }); 
} 

var App = React.createClass({ 
    getInitialState: function() { 
    return { prices: [] }; 
    }, 
    componentDidMount() { 
    fetchPrices(function(result) { 
     this.setState({ prices: result }); 
    }); 
    }, 
    render() { 
    return (
     <div className="app"> 
     <div> 
      {this.props.priceData.map(p => <PriceColumn price={p} />)} 
     </div> 
     </div> 
    ); 
    } 
}); 

var PriceColumn = React.createClass({ 
    render() { 
    return(
    <div> 
     <h4>{this.props.price}</h4> 
    </div> 
    ) 
    } 
}) 

ReactDOM.render(<App priceData={prices}/>, document.getElementById('container')); 

行い、その時点で空の配列であります