ReactJS:如何在改变状态后立即更新组件

ReactJS: how to immediately update component after changing state

本文关键字：更新组件状态改变 ReactJS 更新时间：2023-10-25

我的页面需要从服务器获取数据，这可能需要几秒钟的时间。因此，我想在提取时显示"正在加载…"。所以我有一个布尔状态变量loading来指示它是否正在获取数据。如果loading为true，则render()功能显示"正在加载"，否则显示"未加载"。然而，事实证明，在将loading设置为true之后，react无法重新渲染组件。

这是小提琴。

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')
);

因为JS是单线程的。当您运行循环时，整个页面将冻结。所以它没有反应问题。

获取数据是异步操作，不会冻结页面。您可以用setTimeout来模拟它。在这种情况下，一切都是正确的。

示例：

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

JSFiddle

您可能会尝试这样思考；

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>);
  }
});