reactjs - 如何通过将状态传递给本地存储来同步 useState

我遇到了一个异步 useState 问题。

我有一种情况,我首先需要将一个对象添加到处理程序中的状态数组。然后将此状态添加到 localStorage。

setFavoritedSongs ((prev) => [...prev, {name: "Lala", length: "3:20"}]);

localStorage.setItem("storageItemName", JSON.stringify(favoritedSongs));

如果我先删除整个 localStorage 并运行处理程序。因此,我的 localStorage 中添加了一个空数组(状态显示我已更新)。再次操作后,所需的对象终于添加到我的数组中。

我试过这样的东西,但仍然是同样的问题。

const tempArray = favoritedSongs.push({ name: "Lala", length: "3:20" });

localStorage.setItem(storageItemName, JSON.stringify(tempArray));

请问这个怎么解决?

/// 编辑

我有这样的东西

const FavoriteSong = () => {
  const song = { id: 1, name: "Lala", length: "3:20" };
  const [favoritedSongs, setFavoritedSongs] = useState([]);
  const [isFavorited, setIsFavorited] = useState(false);

  useEffect(() => {
    if (localStorage.getItem("storageItemName")) {
      const storageSongs = JSON.parse(
        localStorage.getItem("storageItemName") || ""
      );
      setFavoritedSongs(storageSongs);

      const foundSong = storageSongs?.find((song) => song.id === song.id);

      foundSong ? setIsFavorited(true) : setIsFavorited(false);
    }
  }, [song]);

  const handleClick = () => {
    if (isFavorited) {
      const filteredSong = favoritedSongs.filter(
        (song) => song.id !== song.id
      );
      localStorage.setItem("storageItemName", JSON.stringify(filteredSong));

      setIsFavorited(false);
    } else {
      setFavoritedSongs((prev) => [...prev, song]);

      localStorage.setItem("storageItemName", JSON.stringify(favoritedSongs));
      setIsFavorited(true);
    }
  };

  return <div onClick={handleClick}>CLICK</div>;
};

export default FavoriteSong;

回答1

只需将您的 localStorage.set 逻辑放在 useEffect 中,以确保它在状态实际更改后运行。

useEffect() => {
    localStorage.setItem(...);
}, [favoritedSongs]};

回答2

为此,您可以使用条件 If data in the array then 它将在 localStorage 中设置,否则不会

const tempArray = favoritedSongs.push({ name: "Lala", length: "3:20" });

tempArray.length && localStorage.setItem(storageItemName, JSON.stringify(tempArray));

.

setFavoritedSongs ((prev) => [...prev, {name: "Lala", length: "3:20"}]);

FavoritedSongs.length(your state name) && localStorage.setItem("storageItemName", JSON.stringify(favoritedSongs));

相似文章

javascript - 输出reactjs时看不到函数

在没有标题的主页上,此功能有效。我想把它放在一个单独的页面上,它不起作用。我查看了示例,一切都收敛了,不会显示在单独的页面上。Аromaddpeople添加,标题(例如<\h1>text<\h1>或其...

最新文章