Reactjs 如果我试图用API响应数据更新我的状态，为什么会开始无限循环？

我对承诺和异步代码有点缺乏经验，我正在用API调用构建我的第一个项目

我的情况是这样的：我必须第一次调用SpotifyAPI来获取一个身份验证令牌，然后再次调用它来获取使用该令牌的数据

这是我的代码：

const FeaturedAlbums = () => {
  const [featuredAlbums, setFeaturedAlbums] = useState([]);

  const getToken = async () => {
    const params = new URLSearchParams();
    params.append("grant_type", "client_credentials");

    const res = await axios({
      method: "post",
      url: "https://accounts.spotify.com/api/token",
      headers: {
        Authorization: `Basic ${process.env.REACT_APP_ENCODED_KEY}`,
      },
      data: params,
    });

    const accessToken = res.data.access_token;

    return accessToken;
  };

  const getFeaturedAlbums = async (token) => {
    const res = await axios({
      method: "get",
      url: "https://api.spotify.com/v1/browse/new-releases",
      headers: {
        Authorization: `Bearer ${token}`,
      },
      params: {
        limit: 6,
      },
    });

    const albums = res.data.albums.items;
    // console.log(albums);

    const myAlbums = albums.map((album) => ({
      artist: album.artists[0].name,
      img: album.images[1].url,
      title: album.name,
    }));
    console.log(myAlbums);
    return myAlbums;
  };

  useEffect(async () => {
    const myToken = await getToken();
    console.log(myToken);

    const newAlbums = await getFeaturedAlbums(myToken);
    setFeaturedAlbums(newAlbums);
  });

我肯定在承诺方面做了一些非常错误的事情，但我需要一些提示。

---

非常感谢

首先，您的

useffect

没有依赖项，我相信这就是导致无限循环的原因。如中所述，

useffect

钩子将在第一次渲染和每次更新后运行。尝试传递一个空数组

[]

作为钩子的第二个参数，钩子将在第一次渲染后运行一次

  useEffect(() => {
    // your code here
  }, []) // <-- empty array

  useEffect(() => {
    async function myAsyncFunc() {
      // do all the async job here
    }
    myAsyncFunc();
  }, []);