时间戳

首页 > 解决方案 > 如果我尝试使用 API 响应数据更新我的状态，为什么会开始无限循环？

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

问题描述

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

我的情况是这样的：我必须第一次调用 Spotify API 以获取身份验证令牌，然后再次调用它以使用此令牌获取我的数据。

这是我的代码：

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

我肯定在做一些非常错误的承诺，但我需要一些提示。非常感谢！！！

标签： reactjsapiasynchronouspromise

解决方案

首先，您useEffect没有依赖关系，我相信这就是导致无限循环的原因。如官方文档中所述，第一次渲染后和每次更新后都会运行一个useEffect钩子。尝试传递一个空数组作为钩子的第二个参数，你的钩子将在第一次渲染后运行一次。[]

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

此外，这不是你应该在钩子中使用异步的方式。您应该在 hook 中定义您的 async 函数，然后立即调用它，如下所示：

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

推荐阅读