与 TypeScript 反应 - LocalStorage 不起作用答案

【问题标题】：React with TypeScript - LocalStorage won't work与 TypeScript 反应 - LocalStorage 不起作用
【发布时间】：2022-06-10 17:45:33
【问题描述】：

我正在使用 React 和 TypeScript 编写的待办事项应用程序进行持久性工作。我正在使用 localStorage 来获得我想要的持久性。

让我给你看一些代码。

  const [todos, setTodos] = useState<todoModel[]>([]);

  useEffect(() => {
    localStorage.setItem("todoItem", JSON.stringify(todos));
  }, [todos])

  const storesTodos = () => {
    const storedValues = localStorage.getItem("todoItem");
    if(!storedValues) { return todos; }

    return JSON.parse(storedValues);
  }

  useEffect(() => { getToDoList(); storesTodos(); 
  console.log("default") }, [])


  useEffect(() => {
    if (!props.reload) return;
    console.log(props.reload)
    getToDoList();
    storesTodos();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.reload])

我将StoresTodo() 函数添加到我的useEffects 中，我尝试了它们。但它不会起作用。我将数据放入我的 localStorage，但在重新加载页面时，它会恢复为默认值。

我在这里错过了什么？

【问题讨论】：

什么是getToDoList？为什么没有任何东西使用来自storesTodos 的返回值？我不太清楚这段代码的期望是什么。为状态值创建了一个默认的空数组，该状态值从不更新，您正在将该空数组写入localStorage 并从localStorage 中读取它，但对读取的值。
最初加载组件时，第 1 行（useState 调用）将设置为空数组。您没有在任何地方调用 setTodos 来更新数组，因为我认为该功能不起作用。

标签： javascript reactjs typescript local-storage react-typescript

【解决方案1】：

根据共享代码判断，您似乎获得了相同的初始值，因为您从未更新 todos。

你可以这样做

...

const storesTodos = () => {
  const storedValues = localStorage.getItem("todoItem");
  if(!storedValues) { 
    setTodos(todos)
    return todos; 
  }

    return JSON.parse(storedValues);
  }

或者您可以使用来自here 的本地存储状态挂钩

function useLocalStorageState({
  key,
  initialValue,
  serialize = v => v,
  deserialize = v => v,
}) {
  const [state, setState] = React.useState(
    () => deserialize(window.localStorage.getItem(key)) || initialValue,
  )

  const serializedState = serialize(state)
  React.useEffect(() => {
    window.localStorage.setItem(key, serializedState)
  }, [key, serializedState])

  return [state, setState]
}

【讨论】：

【解决方案2】：

当你刷新页面时，甚至在 useEffect 设置之前， const [todos, setTodos] = useState<todoModel[]>([]); 已经将您的初始 todos 数组设置为空数组。也许您需要像这样对 localStorage 进行检查...

const [todos, setTodos] = useState<todoModel[]>(() => {
   const storedValues = localStorage.getItem("todoItem"); 
   return storedValues ? JSON.parse(storedValues) : [];
});

【讨论】：