如何修复基于 JSON 响应填充 React 组件？

Posted 2023-02-22

【中文标题】如何修复基于 JSON 响应填充 React 组件？

【英文标题】：How to fix populating React components based on JSON response?

【发布时间】：2017-04-21 10:22:30

【问题描述】：

 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”的console.log的简短sn-p

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

每次我尝试访问该区域中的数据点时，我都无法定义。谢谢您的帮助！

【参考方案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。

【讨论】：

需要使用getIntialState方法，构造函数是es6类语法方法

太棒了，这完全有道理。谢谢

【参考方案2】：

您的代码的问题是 React 组件在收到您的数据时不呈现，它仅在调用 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'));

【讨论】：

这帮助我更多地理解了这个概念，我真的很感激。