从 AsyncStorage 中提取值以更新新组件中的状态

Question

我是 JS / RN 新手，在我的第一个应用程序中遇到了这个问题。

我在入门屏幕中设置数据，然后在下一个屏幕上我有大约 10 个键，我想检查 AsyncStorage 中是否有值，如果有，则更新状态。我尝试使用 useEffect 和 AsyncStorage.getItem 来执行此操作，使用变量的 setData （使用 const [data, setData] = useState({item:key}) 创建 - 我认为它称为嵌套对象）。这导致了无限循环/没有根据我的实现设置变量，因此我不得不创建单独的 useState 对象，以及从 AsyncStorage 中提取数据的函数，然后在 useEffect 中调用它们以在渲染时运行（即使用空数组）作为第二个变量）。这感觉非常低效 - 我做错了什么以及如何改进？

export default function Profile({ navigation }) {
  const { signOut } = React.useContext(AuthContext);
  const [userName, updateUserName] = React.useState(null);
  // 9 more of these
  async function getUserName() {
    try {
      const savedData = await AsyncStorage.getItem('userName');
      if (savedData != null) {updateUserName(savedData)}
    } catch (error) {
      console.log(error);
    }
  };
  // 9 more of these

  React.useEffect(() => {
    getUserName();
    // 9 more of these
  }, []);

非常感谢您的任何回复/建议/资源。

Answer 1

我不知道你之前是如何尝试实现对象状态的，但这里有一个工作示例：

const [data, setData] = React.useState({
    userName: "",
    email: "",
    phone: "",
  });

  React.useEffect(() => {
    const getAsyncStorageData = async () => {
      const userName = await AsyncStorage.getItem("userName");
      const email = await AsyncStorage.getItem("email");
      const phone = await AsyncStorage.getItem("phone");

      setData({
        userName: userName ?? "",
        email: email ?? "",
        phone: phone ?? "",
      });
    };

    getAsyncStorageData()
      .then()
      .catch((err) => console.error(err));
  }, []);

状态初始化时所有属性设置为空字符串（如果可以使用打字稿，可以使用 null 或 undefined 而不是空字符串来实现）。

在 useEffect 内部，我们无法等待异步方法，因此我创建了一个使用 .then 等待的函数，并在 .catch 中管理错误。

getAsyncStorageData 函数从异步存储中获取所有数据，并通过一次调用将其设置为对象状态。

??

语法是三元条件的糖

userName ? userName : ""

希望可以帮到你！