ReactJS: как немедленно обновить компонент после изменения состояния

Question

Моей странице необходимо получить данные с сервера, которые могут занять несколько секунд. Таким образом, я хочу отображать «Загрузка ...» при извлечении. Таким образом, у меня есть переменная состояния boolean loading, чтобы указать, извлекает ли она данные. Если loading - true, render() дисплей функции «Загрузка сейчас», в противном случае отображается «Не погрузка». Однако оказывается, что реакция не может повторно отобразить компонент после установки loading в true.

Адрес jsfiddle.

var Hello = React.createClass({ 
    getInitialState: function() { 
     return { 
      loading: false, 
     }; 
    }, 

    handleClick: function() { 
     this.setState({ 
      loading: true 
     }, function() { 
      // dummy loop to simulate fetching data 
      for (var i=0;i<=100000;i++) { 
       console.log("dummy"); 
      } 

      this.setState({ 
       loading: false, 
      }); 
     }.bind(this)); 
    }, 

    render: function() { 
     if (this.state.loading) { 
      return (
       <div> 
        <button onClick={this.handleClick}> 
         load 
        </button> 
        <p>Loading now</p> 
       </div> 
      ); 
     } 

     return (
      <div> 
       <button onClick={this.handleClick}> 
        load 
       </button> 
       <p>Not Loading</p> 
      </div> 
     ); 
    } 
}); 

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

Answer 1

Поскольку JS является однопоточным. При запуске петли вся страница заморозить. Так что это не проблема React.

Извлечение данных - это асинхронное действие, и оно не задерживает страницу. Вы можете эмулировать его с помощью setTimeout. И это в этом случае все работает правильно.

Пример:

handleClick: function(){ 
    this.setState({ 
    loading: true 
    }, function(){ 
    setTimeout(function() { 
     this.setState({ 
     loading: false, 
    }); 
    }.bind(this), 3000) 
    }.bind(this)); 
}, 

JSFiddle

Answer 2

вы можете попробовать думать, как это;

var Hello = React.createClass({ 
    getInitialState: function(){ 
    return { 
     loading: false 
    }; 
    }, 

    handleClick: function(){ 
    fetch("http://sampleurl.com") 
    .then(function(data){ 
     //if success 
     this.setState({loading: true}) 
    }) 
    }, 

    render: function() { 
    var result; 
    if(this.state.loading == true){ 
    result = <p>Loading Now</p> 
    } else { 
    result = <p>Not Loading</p> 
    } 
    return (
     <div> 
     <button onClick={this.handleClick}>load</button> 
     {/*render variable result here*/} 
     {result} 
     </div>); 
    } 
});