在$ .ajax（）请求之后，反应setState（）不更新状态

3 回答

• 1

  首先，我建议你重读React.JS文档，因为有几件事需要注意：

  永远不要直接改变this.state，而是使用setState方法 . （行：108,111,121,133,136,146）您应该使用state来存储随时间变化的数据，而不是元素 . （行，111,121,136,146）

  TL;博士;让我们回到问题：

  1. Ajax响应正在更改状态值，但该值在日志中不会更改 .

  如果在ajax请求后打印值，您将看不到它！原因是：

  首先，您正在使用Ajax进行 asynchronous request 并尝试查看结果 in synchronous way . JS将首先执行 console.log ，它仍然包含请求之前的值，然后执行ajax请求回调 . 这是您的代码块：

  $.ajax({ ...,
      success: function(res) {
          if(res) { self.setState({ auth : true }); }/
          ...
      }  // will executed later (after ajax get response)
   });
   console.log(this.state.auth); // will executed first, this is why it always prints the value as undefined
  

  其次，在设置新的状态值后，您将无法立即看到更改的状态值 . 例如，假设 this.state.auth 的值为 false ：

  this.setState({ auth: true});
  console.log(this.state.auth); // will print false, instead of true as your new value
  

  您可以使用 componentWillUpdate(nextProps, nextState) 方法查看新的状态值 . 您可以从以下链接了解此信息：React.JS Component Specs and Lifecycle

  2.仍然触发Navbar组件上的componentWillReceiveProps（）方法，并且this.props.auth值仍未定义 .

  这意味着您的ajax响应上的 setState() 成功更改了您的状态值 . 证据是Navbar组件接收一个新的道具，由App组件（其中auth状态被更改）发送它，这将触发 componentWillReceiveProps() 方法 .

  也许你的代码应该是这样的：

  // App
  const App = React.createClass({
      getInitialState : function(){
          return {
              auth : false
          }
      },
  
      componentDidMount : function() {
          console.log('App componentDidMount');
          this.checkAuth();
      },
  
      componentWillUpdate : function(nextProps, nextState) {
          //you'll see the changing state value in here
          console.log('Your prev auth state: ' + this.state.auth);
          console.log('Your next auth state: ' + nextState.auth);
      },
  
      checkAuth : function(){
          var self = this;
          $.ajax({
              type : 'GET',
              url : '/auth',
              success : function(res){
                  if(res){
                      self.setState({ auth : true });
                  }
              }
          });
      },
  
      render : function(){
          return(
              <div className="appWrapper">
                  <Navbar auth={this.state.auth}/>
                  <div className="container">
                      {this.props.children}
                  </div>
              </div>
          );
      }
  });
  
  // Navbar
  // Because the navbar component receive data (this.props.auth) from parent (app) via props, so we're no longer need to assign auth as a state in Navbar component. 
  const Navbar = React.createClass({
      render : function(){
          // you're no longer need checkAuthState method
          let navItems;
          if(!this.props.auth){
              navItems =  (<ul className="nav navbar-nav navbar-right">
                  <li><a href="/login">Login</a></li>
                  <li><a href="/register">Register</a></li>
              </ul>);
          } else {
              navItems =  (<ul className="nav navbar-nav navbar-right">
                  <li><a href="/logout">Logout</a></li>
              </ul>);
          }
  
          return (
              <nav className="navbar navbar-default">
                  <div className="container">
                      <a href="/" className="navbar-brand">Reactor</a>
                      { navItems }
                  </div>
              </nav>
          );
      }
  });
  

  希望能帮助到你！

  回复于 2024-05-11T15:17:28+08:00
• 20

  在ajax范围内 . 它无法访问反应状态 . 作为替代方案，您可以将模块中的其他方法称为ajax成功调用，然后在那里更新状态 . 按照这个例子 .

  var reactModule = React.createClass({
     getInitialState:function(){
  
      },
    render: function() {
      return (      
             <div>
              content
            </div>
      );
    },
  componentDidMount: function() {
       var ajaxSuccess=this.ajaxSuccess;
  
                 $.ajax({
                     type: "POST",
                     url: $api_url + 'index.php/app/icon1_update',
                     dataType: "text",
                     data:fd,
                     contentType: false,
                     processData: false,
                     success: ajaxSuccess
                 });  
       }, 
  ajaxSuccess:function(e){
     //e is the result. update state here.
  }  
  });
  

  回复于 2024-05-11T15:17:28+08:00
• 0

  请查看componentWillReceiveProps的文档：

  componentWillReceiveProps(
    object nextProps
  )
  

  https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

  当您的属性发生变化时，访问属性“nextProps” . 否则，您将访问旧属性 .

  作为一个小提示：在render方法中包含checkAuthState（）代码，而不是在componentDidMount方法中，因为您可以避免使用setState调用 .

  回复于 2024-05-11T15:17:28+08:00