如何等待来自 localStorage 的值？

Question

我正在尝试获取保存在 localStorage 中的值，但组件渲染速度更快，并且值稍后存储。 所以第一次它是未定义的。 如何等待值被存储然后渲染？

在这里我得到存储后的价值

第一次来 null 因为需要时间来存储。

function getUsername() {
    const userData = store.get('user');
    const userFullName = userData && JSON.stringify(userData.fullName)
        ? JSON.stringify(userData.fullName).replace(/"([^"]+(?="))"/g, '$1')
        : null
    console.log(userFullName);
    return userFullName;
};

我在这里渲染

<AccountFound fullName={getUsername()}/>

Answer 1

我不知道您是否使用过钩子，但是您可以尝试在 useEffect 中对 getUserName 进行请求，并且在请求完成后，将值存储在 useState 变量中。 然后基于此渲染组件。

此外，您可以尝试将全名的值存储在成本中，然后执行以下操作：

const fullName = getFullName()
fullName ? <Accountfound fullName={fullName} /> : "Loading data..."

Answer 2

通常，您希望在应用启动后立即从 localStorage 或 cookies 获取值，然后将检索到的数据作为应用initialState的初始状态处理。

我想每个 state 管理库都有自己的方式来更新组件并执行具有副作用的操作，例如localStorage.setItem 。

如果你不使用任何库，你可以实现基本的观察者模式：

function makeObservable(target) {
  let listeners = [];
  let value = target;

  function get() {
    return value;
  }

  function set(newValue) {
    if (value === newValue) return;
    value = newValue;
    listeners.forEach((l) => l(val));
  }

  function subscribe(listenerFunc) {
    listeners.push(listenerFunc);
    return () => unsubscribe(listenerFunc);
  }

  function unsubscribe(listenerFunc) {
    listeners = listeners.filter((l) => l !== listenerFunc);
  }

  return {
    get,
    set,
    subscribe,
  };
}

然后通过在挂载上执行subscribe将其与useState挂钩：

const cachedUser = localStorageOrCookies.get("user");
const userObservable = makeObservable(JSON.parse(cachedUser));

export default function useUser() {
  const [user, setUser] = Reaact.useState(userObservable.get());

  React.useEffect(() => {
    return userObservable.subscribe(setUser);
  }, []);

  function set(newUser) {
    userObservable.set(newUser);
    localStorageOrCookies.set("user", JSON.stringify(newUser));
  }

  const actions = {
    setName: name => set({ ...user, name }),
    setAge: age => set({ ...user, age }),
  };

  return [user, actions];
}

现在您可以在组件中使用它：

import useUser from "./path/to/useUser";

const SomeComponent = () => {
  const [user, userActions] = useUser();

  return <>
    <AccountFound fullName={user.name}/>
    <button onClick={() => userActions.setName("Vasya")}>Change name</button>
  </>;
}