通过ReactuseEffectHook更新状态时防止无限循环

看来您需要通过添加另一个来分离两个获取的关注点useEffect。然后，您可以使用它Promise.all来等待第二个api调用的响应完成，然后再更新歌曲。

const StackOverflowExample = () => {
  const [songs, setSongs] = useState([]);
  const [s3Songs, setS3Songs] = useState([]);
  const getSOng= async sOng=> {
    const artist = song.key.split(" ||| ")[0];
    const title = song.key.split(" ||| ")[1].slice(0, -4);
    const metadata = await API.get("SongList", `/songs/${artist}/${title}`);
    return metadata
  }
  useEffect(() => {
    const getS3SOngs= async () => {
      const s3s = await Storage.list("", { level: "public" })n
       setS3Songs(s3s);
    };
    getS3Songs();
  }, []);
  useEffect(()=>{
     const pending = s3Songs.map(sOng=>getSong(song))
     Promise.all(pending).then(sOngs=>setSongs(songs));
  }, [s3Songs])
  const renderSOngs= () => {
     return songs.map(sOng=> {
       return 
{song.title}
;
     });
};
return (
  

    
{renderSongs()}
   
  );
};