React DOM 在 ajax 请求之前被渲染

Question

您好，我是 react 新手，我正在尝试构建一个应该显示图表的 react 组件，我正在使用融合图表来执行此操作。我需要通过 API 动态获取数据以将其提供给图表。但是图表在没有数据的情况下呈现，并且仅在加载图表后才启动 ajax 请求。我还想知道一旦数据可用，如何重新渲染 ReactDOM

我的代码sn-p：

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 Christoff 所述，在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')
);