從axios調用React redux設置初始狀態

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函數返回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) });