React DOMはajaxリクエストの前にレンダリングされます

Question

こんにちは私は反応して反応チャートを表示する反応コンポーネントを作成しようとしていますが、これを行うには融合チャートを使用しています。そして、私はそれをグラフにフィードするAPIを介して動的にデータを取得する必要があります。しかし、チャートはデータなしでレンダリングされ、ajaxリクエストはチャートがロードされた後にのみ開始されます。 thisがここにトリッキーであるポインタとして

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

EDIT

：また、私は、データが

マイコードスニペット利用可能になるとReactDOMを再レンダリングする方法を知りたいです。したがって、ajaxコールの前に、that = thisを割り当てることによって、「現在の」オブジェクトを指す何かが必要です。

もう1つの方法は、ajax関数をバインドすることです。

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

---

私はstateであなたのchartDataを格納します。 @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') 
 
);