如何修复基于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'));