Question

我有一个使用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，所以这是不是意味着它不是异步的？

有什么想法吗？

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

Answer 1

您必须从getUserData函数返回承诺，并使用.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)
});

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

1 个答案: