在ajax请求之前呈现React

Question

嗨，我是新的反应，并试图建立一个反应组件，应该显示图表，我正在使用融合图表这样做。我需要通过API动态地获取数据，以便将数据输入图表。但是图表在没有数据的情况下呈现，只有在加载图表之后才会启动ajax请求。此外，我还想知道如何在数据可用后重新呈现ReactDOM。

我的代码片段：

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery'
import FusionCharts from 'fusioncharts';
import ReactFC from 'react-fusioncharts';
import chart from 'fusioncharts/fusioncharts.charts';
class MyApp extends React.Component {
      render() {
          var chartData;
                $.ajax({
                type: "GET",
                url: 'someurl',
                dataType: "json",
                success: function (data) {    
                chartData =data;
                alert(chartData);
 }
            });

          var chartConfigs = {
    type: "Column2D",
    className: "fc-column2d", // ReactJS attribute-name for DOM classes
    dataFormat: "JSON",
    dataSource: {
        chart:{},
        data: chartData
    }
};  
        return (
            <div>< ReactFC {...chartConfigs }/></div>  

        );
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

Answer 1

编辑

因为这里的指针this很棘手。因此，在ajax调用之前，您需要通过赋值that = this来指向“当前”对象。

另一种方法是绑定ajax函数。

$.ajax({...}).bind(this)

我会把你的chartData存储在state里。然后，如@Dimitar所述，在componentWillMount中执行ajax。ajax调用完成后，使用setState触发render。

​

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery'
import FusionCharts from 'fusioncharts';
import ReactFC from 'react-fusioncharts';
import chart from 'fusioncharts/fusioncharts.charts';
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: null; // OR whatever type to fit your data
    }
  }
  
  componentWillMount() {
    let that = this
    $.ajax({
      type: "GET",
      url: 'someurl',
      dataType: "json",
      success: function (data) {
        console.log(data);
        that.setState({chartData: data});
      }
    });
  }
  
  render() {
    let chartConfigs = {
      type: "Column2D",
      className: "fc-column2d", // ReactJS attribute-name for DOM classes
      dataFormat: "JSON",
      dataSource: {
          chart:{},
          data: chartData
      }
    };  
    
    return (
      <div><ReactFC {...chartConfigs }/></div>  
    );
  }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

​