localStorage.getItem() 在頁面刷新時不檢索數據 - ReactJs (TypeScript)

Question

我正在嘗試使用 ReactJs 創建待辦事項列表應用程序，使用localStorage setItem()工作正常但getItem()除了空數組外不返回任何內容！

• 我正在使用|| "" || ""因為JSON.parse()返回string || null string || null在 TypeScript。

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

 useEffect(() => {
   const items = JSON.parse(localStorage.getItem("todos") || "");
   if (items) {
     setTodos(items);
   }
 }, []);

這是我向todos提供數據的地方

const [todos, setTodos] = useState<todosObj[]>([]);
const [count, setCount] = useState(1);
const [status, setStatus] = useState<"All" | "completed" | "uncompleted">(
    "All"
  );
const [inputText, setInputText] = useState("");
const [date, setDate] = useState(new Date());

const inputHandler = (e: React.FormEvent<HTMLInputElement>) => {
    setInputText(e.currentTarget.value);
  };

const submitHandler = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setCount(count + 1);

    if (inputText !== "") {
      setTodos([
        ...todos,
        {
          id: count,
          text: inputText,
          completed: false,
          date: date,
        },
      ]);
    }

    setInputText("");
  };

Answer 1

抱歉，我沒有足夠的聲譽來發表評論，所以必須將其作為答案發布：

todos的初始數據是否已設置？ 如果您可以提供向todos提供數據的位置，那就更好了

Answer 2

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

 useEffect(() => {
   const storedTodos = localStorage.getItem("todos")
   const items = JSON.parse(storedTodos);
   if (items) {
     setTodos(items);
   }
 }, []);

嘗試這種方式，我認為它會起作用。

Answer 3

我通過getItem()初始化todos state 解決了這個問題
像這樣：

const [todos, setTodos] = useState<todosObj[]>(
    JSON.parse(localStorage.getItem("todos") || "") || []
  );

如果有人知道它不起作用的原因，請告訴我。