刷新后無法檢索本地存儲數據

Question

每當我添加或更新 object 時，它都會直接進入本地存儲並且工作正常。 但是，當我刷新頁面時，存儲在 LS 中的數據將被替換為一個空數組。 我究竟做錯了什么？

  const [data, setData] = useState<NoteType[]>([]);

   useEffect(() => {
    setData(JSON.parse(window.localStorage.getItem("notes") || "[]"));
  }, []);

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

  const handleNoteSave = (text: string, id: string) => {
    const updatedNote = data.map((note) => {
      if (note.id === id) {
        return { ...note, text };
      }
      return note;
    });

    setData(updatedNote);
  };

  const handleNoteAdd = () => {
    setData((prevState) => [...prevState, { text: "", id: nanoid() }]);
  };

Answer 1

代替

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

和

useEffect(() => {
    if (data.length > 0) { 
        window.localStorage.setItem("notes", JSON.stringify(data));
    }
  }, [data]);

Answer 2

useEffect都會在加載時觸發，你可以直接使用useState從 localStorage 加載數據

然后在 useEffect 數據上應該有一些東西

const [data, setData] = useState<NoteType[]>(() =>  (JSON.parse(localStorage.getItem("notes") ?? "[]") as NoteType[]));

useEffect(() => {
  window.localStorage.setItem("notes", JSON.stringify(data));
[data]);