React DOM在ajax請求之前得到渲染

您好我是新來做出反應並嘗試構建一個應該顯示圖表的反應組件，並且我正在使用融合圖表來執行此操作。我需要通過API動態獲取數據以將其提供給圖表。但是圖表呈現時沒有數據，只有在圖表加載後纔會啓動ajax請求。此外，我想知道，一旦數據可用React DOM在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') 
);

來源

2017-08-16 JDP

不添加Ajax代碼在渲染...使用生命週期方法 - https://facebook.github.io/react/docs/react-component.html 這屬於在'componentWillMount（）{}'中，你應該渲染一些佔位符，比如'loading' - 然後在數據到達時改變狀態。 –

@DimitarChristoff Depends-didMount是官方的建議，除非您使用服務器端渲染的解決方法。 –

大概是真的，但它可以讓你在渲染之前做其他的設置，比如設置狀態，所以我更喜歡'willMount/willUnmount'。我的標準是：如果操作不需要觸摸/使用DOM，請在渲染前急切/儘早執行，否則請等待安裝。雖然說實話，但自從我編寫了一個具有後端的領域知識的UI組件以來，這已經有一段時間了，它不僅僅以道具的形式獲取其數據。在對像redux或mobx這樣的模型進行因子分解之前，這只是一件簡單的事情。 –

編輯

隨着指針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') 
 
);

來源

2017-08-16 12:24:40

<3我們需要的英雄 –

我嘗試了一些類似於此的東西，但在之前的componentDidMount（）中卻沒有幫助我。當我嘗試執行代碼時，出現錯誤，指出this.setState不是函數，我的圖表也沒有渲染。我錯過了什麼嗎？這種反應對我來說是全新的，我只是想學習 – JDP

@JDP：對不起，我錯過了一步。答案已更新 –

React DOM在ajax請求之前得到渲染

回答

相關問題