React DOM在ajax请求之前呈现

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电话会议之前，您需要指出一些内容，以及当前的＃34;通过分配that = this来对象。

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

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

我会将您的chartData存储在state中。然后执行componentWillMount中的ajax，就像@Dimitar Christoff所说的那样。完成ajax调用后，使用setState触发render。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;