从axios调用React redux设置初始状态-Java 学习之路

我有一个使用Redux和axios的React应用程序 . 在我从服务器获取一些信息之前，我不想要任何渲染，我通过axios检索 .

我认为最好的方法是通过基于axios调用初始化redux状态 .

但是，我的函数似乎没有及时返回任何状态初始化...

function getUserData() {
    if (Auth.loggedIn()) { //leaving this here bc it could be important; Auth is another class and loggedIn returns a boolean
        axios.get('/route').then(res => {
            console.log(res.data); //This prints the right thing (an object)
            return res.data;
        });
    } else {
        return ' '; //This works fine; state gets initialized to ' '
    }
}

    let userData = getUserData();
    console.log(userData); //When getUserData() returns ' ', this prints ' '. However, when getUserData() returns my object, this prints undefined.

    const initialState = {
        userData: userData
    };

我意识到这可能是一个问题，getUserData（）是异步的，并且在getUserData（）之前运行的console.log（userData）已经完成 . 但是，我尝试过：

getUserData().then(function(userData) {
     console.log(userData);
});

并收到'TypeError：无法读取属性'然后'未定义' . 我的函数显然没有返回一个promise，所以这是不是意味着它不是异步的？

有任何想法吗？

或者，有更好的方法吗？我总是可以设置初始状态，然后立即更改它，并使渲染等待条件渲染完成更改，但这看起来肯定更糟 .

1 回答

您必须从 getUserData 函数返回promise并使用 .then() 访问它 .

function getUserData() {
  return new Promise((resolve, reject) => {
    if (Auth.loggedIn()) {
      axios.get('/route')
        .then(res => resolve(res.data))
        .catch(err => reject(err));
    } else {
      resolve(' ');
    }
  });
};

getUserData().then(function(userData) {
  const initialState = {
    userData: userData, // ' ' or axios result
  };
  console.log(initialState.userData)
});

回复于 2024-05-01T15:25:50+08:00

从axios调用React redux设置初始状态

1 回答

相关问题