时间戳

首页 > 解决方案 > 使用 useReducer 时，如何从 AsyncStorage 获取数据并将其添加到初始状态？

reactjs - 使用 useReducer 时，如何从 AsyncStorage 获取数据并将其添加到初始状态？

问题描述

我在 useEffect 中使用Hooks和AsyncStorage.setItem中的useContext 和 useReducer来在状态更新时保存数据。在应用程序重新加载时，我想确保使用AsyncStorage.getItem获取保存的数据并将其添加到初始状态。

我尝试将带有异步的 init 函数添加为 useReducer 的第三个属性，但它仍然没有用接收到的数据替换初始数据。请通过以下代码和帮助。

先感谢您！

我可以将数据保存到 AsyncStorage 的当前代码

  const [user, dispatch] = useReducer(userReducer, {});

  useEffect(() => {
    AsyncStorage.setItem('user', JSON.stringify(user))
  }, [user]);

  return(
    <UserContext.Provider value={{user,dispatch}}>
      {props.children}
    </UserContext.Provider>
  );
}

下面是我尝试过的代码，但无法将现有数据保存为初始数据。

const getUser = async function() {
  const userData = await AsyncStorage.getItem('user')
  console.log("parse");
  console.log(userData);
  console.log("parsed data");
  console.log(JSON.parse(userData));
  return userData ? JSON.parse(userData) : {};
}

export const UserContext = createContext();

const UserContextProvider = (props) => {
  const [user, dispatch] = useReducer(userReducer, {}, getUser);

  useEffect(() => {
    console.log("context");
    console.log(JSON.stringify(user));
    AsyncStorage.setItem('user', JSON.stringify(user))
  }, [user]);

  return(
    <UserContext.Provider value={{user,dispatch}}>
      {props.children}
    </UserContext.Provider>
  );
}

标签： reactjsreact-nativeasync-awaitreact-hooksasyncstorage

解决方案

谢谢！根据以下建议更新和工作代码并进行细微更改。

const getUser = async () => {
  try {
    const user = await AsyncStorage.getItem('user')
    return user ? JSON.parse(user) : {};
  } catch (e) {
    console.log('Failed to fetch the data from storage');
  }
}
export const UserContext = createContext();

const UserContextProvider = (props) => {
  const [user, dispatch] = useReducer(userReducer, {});

  // Loading initial Satte
  useEffect(() => {
     async function fetchUser() {
       const user = await getUser();
       dispatch({type: 'ADD_USER', user});
     }
     fetchUser();
  }, []);

  // Update AsyncStorage when user is updated
  useEffect(() => {
    // This check is required to avoid initial writing to asyncStorage
    if(user) {
        AsyncStorage.setItem('user', JSON.stringify(user))
    }
  }, [user]);


  return(
    <UserContext.Provider value={{user,dispatch}}>
      {props.children}
    </UserContext.Provider>
  );
}

推荐阅读