反应 setState {} 不设置变量

Question

我有以下用于主视图和用户登录的代码：

export class MainView extends React.Component {

    constructor(){
        super();
        this.state = {
            array: [],        
            user: null,
            userData: {},    
        };
    }

    setUserData(user) {

        if (user) {
            this.setState({ userData: user.user });
            console.log(user.user);
            console.log (userData); /* errors in console */
        } else {
            console.log('userData not set');
        }

   }


   onLoggedIn(authData) {

       this.setState({ user: authData.user.Username });

       /* setting localstorage key:item */

       // console.log(authData);

       localStorage.setItem('token', authData.token);

       localStorage.setItem('user', authData.user.Username);

       this.getArrayObjects(authData.token);

       this.setUserData(authData);

   }

使用 Passport 获取身份验证数据和令牌。我不明白为什么它会在 setUserData 函数中记录 user.user 但会记录 userData 变量的“未定义”错误在同一个函数中。有什么想法吗？

Answer 1

您正在尝试访问一个未定义的变量。

userData 存在于状态中。

因此您应该使用 this.state.userData 访问它。

但即使你写 console.log(userData);，它也会打印 {} 因为在 React 中，setState 是 asynchronous。也就是说，状态不会立即更新。

如果你想检查状态是否已经更新，像这样检查。

this.setState({ userData: user.user }, () => {
    console.log(this.state.userData);
});

setState 的第二个参数是一个函数，一旦 state 成功更新就会被调用。所以，在那里你可以看到控制台中的值。

Answer 2

您不能直接以 var 的形式访问状态。您需要访问状态和属性：

console.log(state.userData);

此外，在您的代码中，当您打印 state.userData 时，您可能会看到旧值，因为 setState 是一个异步函数。

反应 setState {} 不设置变量

React setState {} not setting variable

authentication

object

setstate

reactjs