如何等待來自 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>
  </>;
}