在渲染中调用 setState 是不可避免的

Question

React 文档指出 render 函数应该是 pure 这意味着它不应该在其中使用 this.setState 。但是，我相信当状态被依赖时在“远程”上，即来自 ajax 调用的结果。唯一的解决方案是 setState() 在 render 函数中

在我的例子中。我们的用户应该能够登录。登录后，我们还需要检查用户的访问权限（ajax 调用）来决定如何显示页面。代码是这样的

React.createClass({
     render:function(){
          if(this.state.user.login)
          {
              //do not call it twice
              if(this.state.callAjax)
              {
              var self=this
              $.ajax{
                  success:function(result)
                  {
                      if(result==a) 
                      {self.setState({callAjax:false,hasAccess:a})}
                      if(result==b) 
                      {self.setState({callAjax:false,hasAccess:b})}

                  }
              }
              }
              if(this.state.hasAccess==a) return <Page />
              else if(this.state.hasAccess==a) return <AnotherPage />
              else return <LoadingPage />
          }
          else
          {
            return <div>
                   <button onClick:{
                   function(){this.setState({user.login:true})}
                   }> 
                   LOGIN
                   </button>
                   </div>
          }
     }
})

ajax 调用不能出现在componentDidMount 中，因为当用户单击登录按钮时，页面会重新呈现，并且还需要 ajax 调用。所以我想setState 的唯一位置是在 render 函数内部违反React 原则

有更好的解决方案吗？提前致谢

Answer 1

render 应该始终保持纯洁。在那里做有副作用的事情是一种非常糟糕的做法，并且调用setState 是一个很大的危险信号；在像这样的简单示例中，它可以正常工作，但它是通往高度不可维护组件的道路，而且它之所以有效，是因为副作用是异步的。

相反，想想你的组件可能处于的各种状态——就像你在为一个状态机建模（事实证明你就是这样）：

• 初始状态（用户未点击按钮）
• 等待授权（用户点击登录，但我们还不知道 Ajax 请求的结果）
• 用户可以访问某些东西（我们已经获得了 Ajax 请求的结果）

使用组件的状态对此进行建模，一切顺利。

React.createClass({
  getInitialState: function() {
    return {
      busy: false, // waiting for the ajax request
      hasAccess: null, // what the user has access to
      /**
       * Our three states are modeled with this data:
       *
       * Pending: busy === true
       * Has Access: hasAccess !==  null
       * Initial/Default: busy === false, hasAccess === null
       */
    };
  },

  handleButtonClick: function() {
    if (this.state.busy) return;

    this.setState({ busy: true }); // we're waiting for ajax now
    this._checkAuthorization();
  },

  _checkAuthorization: function() {
    $.ajax({
      // ...,
      success: this._handleAjaxResult
    });
  },

  _handleAjaxResult: function(result) {
    if(result === a) {
      this.setState({ hasAccess: a })
    } else if(result ===b ) {
      this.setState({ hasAccess: b })
    }
  },

  render: function() {
    // handle each of our possible states
    if (this.state.busy) { // the pending state
      return <LoadingPage />;
    } else if (this.state.hasAccess) { // has access to something
      return this._getPage(this.state.hasAccess);
    } else {
      return <button onClick={this.handleButtonClick}>LOGIN</button>;
    }
  },

  _getPage: function(access) {
    switch (access) {
    case a:
      return <Page />;
    case b:
      return <AnotherPage />;
    default:
      return <SomeDefaultPage />;
    }
  }
});