为什么每次重新加载页面时我的 localStorage 都会变空？

Question

我不明白该怎么办。我认为这只是 .setItem 和 .getItem 但 useState 更改状态可能有问题

 const LOCAL_STORAGE_KEY = "products";
  const [products, setProducts] = useState([]);

  const addProductHandler = (product) => {
    console.log(product);
    setProducts([...products, { id: uuid(), ...product }]);
  };


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

  useEffect(() => {
    const retriveProducts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if (retriveProducts) setProducts(retriveProducts);
  }, []);

Answer 1

当组件安装时，您将 的初始状态设置products为空数组。然后您存储到localStorage：

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

在从本地存储恢复状态（刚刚存储的空数组）之后，这意味着初始状态始终为空：

useEffect(() => {
  const retriveProducts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
  if (retriveProducts) setProducts(retriveProducts);
}, []);

要解决此问题，请更改块的顺序useEffect（先恢复然后存储），并防止存储useEffect将空数组设置到本地存储：

useEffect(() => {
  const retriveProducts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
  if (retriveProducts) setProducts(retriveProducts);
}, []);

useEffect(() => {
  if(products?.length) { // only store the state if products exists and it's length is greater than 0
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(products));
  }
}, [products]);