异步等待反应/redux js 异步事件答案

【问题标题】：acync await react/redux js async events异步等待反应/redux js 异步事件
【发布时间】：2021-01-27 19:04:01
【问题描述】：

我遇到了异步事件的问题。登录站点时，当 locale-storage 尚未准备好时。我不能让它异步。刷新页面后，问题就消失了。

未处理的拒绝 (SyntaxError)：JSON 中位置 0 处的意外标记 u

字符串中的问题

const userData = await userDataGetter();

export function setBalanseFetch(){

    return async dispatch => {

        const userData = await userDataGetter();


        const userID = await userData.userId;

        try{
            const respone = await axios.post('/api/profile', {userID})
            const json = await respone["data"];
            const FetchBalanse = json.items[0].balanse;
            dispatch( {type: FETCH_BALANSE, payload: Number(FetchBalanse)})
        }catch(e){
           
            console.log(`Axios spend balanse request failed: ${e}`);
        }
    }
}

代码函数userDataGetter

async function userDataGetter(){

    const userData = await JSON.parse(localStorage.userData);

    return userData;
}

export default userDataGetter

【问题讨论】：

能否请您从本地存储中获取哪些数据，因为您没有从本地存储中正确获取数据，我的意思是 => const userData = await JSON.parse(localStorage.getItem( "keyName");
这样我得到了 jwt 令牌和用户 ID。此代码有效，仅在授权后第一次登录时出现问题，同时将数据添加到商店并且我想获取它。刷新页面后，问题就消失了。
尽量不要让 userDataGetter 异步，就像这个函数 userDataGetter(){ const userData = JSON.parse(localStorage.userData);返回用户数据；并且当你尝试访问它时，试试这个 const userData = userDataGetter(); const userID = userData.userId;

标签： javascript reactjs redux promise async-await

【解决方案1】：

你有：

const userData = await JSON.parse(localStorage.userData);

但是，JSON.parse 不是异步函数。它确实不等待 localStorage 密钥出现并准备就绪，这就是您的代码似乎希望它做的事情。（另外，正如评论指出的那样，你想要localStorage.get('userData')）。你也没有检查它是否存在。

您也没有显示 localStorage 的设置位置。但是您的解决方案可能是然后在您知道它是从设置它的同一个地方设置它之后触发依赖它的代码，并且当您需要在任何其他时间访问它时，检查它的首先出现。

【讨论】：