我遇到了一个异步 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;

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

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));