reactjs - $ .ajax()请求后，React setState()不更新状态

我正在使用react-router进行 react 。使用IndexRoute上的onEnter异步 Hook 检查身份验证后，将呈现App组件。应用程序组件具有初始状态auth，在呈现时会设置为undefined。 auth状态将作为prop传递给Navbar组件，在该状态下将用来决定是否显示登录，注册和注销链接。

完成App组件的渲染后，componentDidMount()进行ajax调用以再次检查用户是否已通过身份验证。响应时，它会更改状态。从ajax请求状态更改后，我将状态记录到控制台，this.setState()方法未更改状态，但以某种方式仍会触发Navbar组件上的componentWillReceiveProps()方法，并且this.props.auth值仍未定义。

// Checks Authentication Asynchronously
isAuthenticated(nextState, replace, callback) {
    $.ajax({
        type : 'GET',
        url : '/auth',
        success : function(res){
            if(!res){
                callback(replace({ pathname: '/login', query: { auth: 'false' } }));
            }else{
                callback();
            }
        }
    });
};

// routes
var routes = (
    <Router history={browserHistory}>
        <Route path="/" component={require('./components/app')}>
            <IndexRoute component={require('./components/dashboard/index')} onEnter={Auth.isAuthenticated}/>

            <Route path="/register"
                   component={require('./components/authentication/register')}
                   onEnter={Auth.isNotAuthenticated} />

            <Route path="/login"
                   component={require('./components/authentication/login')}
                   onEnter={Auth.isNotAuthenticated}/>

            <Route path="*"
                   component={require('./components/404/404')}/>
        </Route>
    </Router>
);

// App
const App = React.createClass({

    getInitialState(){
        return {
            auth : undefined
        }
    },

    componentDidMount(){
        console.log('App componentDidMount');
        this.checkAuth();
    },

    checkAuth(){
        var self = this;
        $.ajax({
            type : 'GET',
            url : '/auth',
            success : function(res){
                if(res){
                    self.setState({
                        auth : true
                    });
                }else{
                    self.setState({ auth : false});
                }
            }
        });
        console.log(this.state.auth);
    },

    render() {
        return(
            <div className="appWrapper">
                <Navbar auth={this.state.auth}/>

                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
});

// Navbar
var Navbar = React.createClass({

    getInitialState(){
        return{
            user_actions : '' ,
            auth : this.props.auth
        }
    },

    componentDidMount(){
        console.log('Navbar componentDidMount ', this.props.auth);
        this.checkAuthState();
    },

    componentWillReceiveProps(){
        console.log('Navbar componentWillReceiveProps ', this.props.auth);
        this.setState({
            auth : this.props.auth
        });
        this.checkAuthState();
    },

    checkAuthState(){
        console.log('Nav Mounted with auth : ', this.state.auth);

        if(this.state.auth == undefined){
            this.state.user_actions = '';
        }
        if(!this.state.auth){
            this.state.user_actions =   <ul className="nav navbar-nav navbar-right">
                <li><a href="/login">Login</a></li>
                <li><a href="/register">Register</a></li>
            </ul>;
            this.setState({
                user_actions : this.state.user_actions
            });
        }

        if(this.state.auth){
            this.state.user_actions =   <ul className="nav navbar-nav navbar-right">
                <li><a href="/logout">Logout</a></li>
            </ul>;
            this.setState({
                user_actions : this.state.user_actions
            });
        }
    },

    render : function(){
        return (
            <nav className="navbar navbar-default">
                <div className="container">
                    <a href="/" className="navbar-brand">Reactor</a>
                    {this.state.user_actions}
                </div>
            </nav>
        );
    }
});

最佳答案

首先，我建议您重新阅读React.JS文档，因为有几点需要注意:

tl; dr;
让我们回到问题:
1. Ajax响应正在更改状态值，但是该值在您的日志中没有更改。
如果在ajax请求后打印该值，您将看不到它!原因是:
首先，您正在使用Ajax进行异​​步请求，并尝试以同步方式查看结果。 JS将首先执行您的console.log，该this.state.auth仍包含请求前的值，然后执行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

其次，设置新的状态值后，您将无法立即看到更改后的状态值。例如，假设false的值为componentWillUpdate(nextProps, nextState):

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

您可以使用setState()方法查看新的状态值。您可以通过以下链接了解此信息:React.JS Component Specs and Lifecycle
2.仍在Navbar组件上触发componentWillReceiveProps()方法，并且this.props.auth值仍未定义。
这意味着您的状态值已由ajax响应上的componentWillReceiveProps()成功更改。证明是Navbar组件接收到一个新的 Prop ，该 Prop 将通过App组件(更改了身份验证状态)将其向下发送，这将触发ojit_code方法。
也许您的代码应该是这样的:

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

希望能帮助到你!

关于reactjs - $ .ajax()请求后，React setState()不更新状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36648245/