如何修復基於JSON響應的填充React組件？

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響應填充反應組件。這是「this.props.priceData」

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 

每次我試圖訪問這個區域的數據點，我得到了一個未定義的執行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

與您的代碼的問題是做出反應成分在收到您的數據犯規渲染，當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'));