Использование реагировать, чтобы получить данные с сервера и обновления состояния компонента

Question

я хочу, чтобы получить случайное число от сервера каждые 5 секунд, и я сделал это с помощью JQuery/Ajax

Я немного запутался, шагов, которые я необходимо будет принимать с использованием реагировать, чтобы сделать это, это мой оригинальный сценарий:

<script type="text/javascript"> 
    fetchData(); 
    $(document).ready(function() { 
     setInterval(fetchData, 5000); 
    }); 
    function fetchData(){ 
     $.ajax({ 
      url: "/realtime/show", 
      type: "GET", 
      contentType: 'application/json', 
      success: function(result) { 
       $("#result").html(result.data); 
      } 
     }); 

    } 

Answer 1

в компонентной componentDidMount звонок вы можете установить свой интервал, передавая ей функцию, которая сделает ваш вызов AJAX. Затем в обратном вызове вызова AJAX вы можете каким-то образом установить состояние компонентов (будьте осторожны с this). Затем ваш метод рендеринга вы просто используете состояние, как вам нужно. Обязательно очистите интервал, когда компонент отключится, чтобы он не работал. Ниже приведен простой пример:

var AjaxCall = React.createClass({ 
    intervalId: null, 
    request: null, 
    getInitialState: function() { 
     return { 
      data: null 
     }; 
    }, 

    componentDidMount: function() { 
     this.intervalId = setInterval(this.fetchData, 5000); 
    }, 

    componentWillUnmount: function() { 
     if (this.intervalId) { 
      clearInterval(this.intervalId) 
      this.intervalId = null; 
     } 

     if (this.request) { 
      this.request.abort(); 
      this.request = null; 
     } 
    }, 

    fetchData: function() { 
     this.request = $.ajax({ 
      url: "/realtime/show", 
      type: "GET", 
      contentType: 'application/json', 
      success: function(result) { 
       var d = // process results 
       this.setState({ data: d }); 
      }.bind(this) 
     }); 
    }, 

    render: function() { 
     // use this.state.data here however you need ot 
     if (!this.state.data) { 
      return <div>No data</div> 
     } 

     return <div>{this.state.data}</div>; 
    } 
}); 

ReactDOM.render(
    <AjaxCall />, 
    document.getElementById('container') 
); 

Вы можете увидеть больше информации о том, AJAX звонки из компонентов (например, для начальной загрузки данных) here