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响应填充react组件。这是“this.props.priceData”

的console.log的简短片段

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

每次我尝试访问此区域中的数据点时，都会得到未定义的信息。谢谢您的帮助！

Answer 1

$。getJSON是异步的，因此当您在React.render方法中使用价格时，您的回调尚未执行。更好的方法是使组件本身负责调用，并使用回调将返回的价格存储在其状态中。 E.g。

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

代码的问题是React组件在收到数据时不会呈现，它只会在调用ReactDOM.render并且当时price为空数组时呈现

这样做

// 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'));

如何根据JSON响应修复填充React组件？

2 个答案: