React DOM 在 ajax 请求之前呈现

Question

嗨，我是 React 的新手，我正在尝试构建一个应该显示图表的 React 组件，我正在使用融合图表来这样做。我需要通过 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.

来指向 "current" 对象

另一种方法是绑定 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')
);

React DOM 在 ajax 请求之前呈现

React DOM gets rendered before the ajax request

jquery

ajax

reactjs

fusioncharts