React + AJAX компонентный рендеринг

Question

Чтобы заполнить содержимое компонента React, я использую запрос AJAX в кубе метода componentWillMount, где я изменяю this.state в результате выполнения запроса. Проблема заключается в том, что метод рендеринга выполняется так же, как и до завершения запроса, как после изменения this.state с помощью setState. Более того, если такой компонент отображает один, который также используется AJAX, количество вызовов рендеринга растет как сила двух.

Как сделать компонент визуализирован только после получения необходимых данных?

var News = React.createClass({ 
    getInitialState: function() { 
     return { 
      news: [], 
      page: 1 
     }; 
    }, 

    componentWillMount: function() { 
     let xmlhttp = getXmlHttp(); 
     xmlhttp.open("POST", "server/news.php", true); 
     xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     xmlhttp.onreadystatechange=() => { 
      if (xmlhttp.readyState != 4) return; 
      clearTimeout(timeout); 
      if (xmlhttp.status == 200) { 
       this.setState({ 
        news: eval(xmlhttp.responseText.toString()) 
       }); 
      } else { 
       handleError(xmlhttp.statusText); 
      } 
     }; 
     xmlhttp.send('page=' + this.state.page); 
     var timeout = setTimeout(function(){ xmlhttp.abort(); handleError("Request time over") }, 10000); 
    }, 

    render: function() { 
     let itemList = this.state.news.map(function(item, iterator){ 
      return (
       <NewsItem 
        niTitle={item[0]} 
        niText={item[1]} 
        niDate={item[2]} 
        niImg={item[3]} 
        key={"ni " + iterator} 
       /> 
      ); 
     }); 
     return (
      <div> 
       {itemList} 
       <PageChanger page={this.state.page}/> 
      </div> 
     ); 
    } 
}); 

Answer 1

Как сделать компонент визуализируется только после получения необходимых данных о ?

Если функция render возвращает false, ничего не будет отображаться. (Источник:. the docs)

Таким образом, вы можете установить флаг в своем начальном состоянии:

getInitialState: function() { 
    return { page: 1, shouldRender: false }; 
} 

Затем в render, вы можете проверить этот флаг:

if (! this.state.shouldRender) return false; 

В обратный вызов, переданный в XHR, вы можете обновить флаг:

this.setState({ 
    shouldRender: true, 
    news: eval(xmlhttp.responseText.toString()), 
}); 

Answer 2

Сначала отвлеките свой сетевой вызов помощнику и импортируйте его в компонент по мере необходимости.

Во-вторых, используйте componentDidMount, а не componentWillMount, чтобы избежать многократного нанесения.

, например:

import networkCall from ../helpers/networkCall 
    componentDidMount() { 
     this.setState({ 
      emails: networkCall.news, 
      emailCache: networkCall.page 
     }); 
    },