Question

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

这是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是单线程的。当您运行循环整页冻结时。所以它没有反应问题。

获取数据是异步操作，它不会冻结页面。您可以使用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>);
  }
});

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

2 个答案: