我在使用返回的 json 数据设置状态时遇到问题答案

【问题标题】：I am having a problem setting state with returned json data我在使用返回的 json 数据设置状态时遇到问题
【发布时间】：2021-09-05 16:02:58
【问题描述】：

我正在做一个使用电影数据库 Api 的项目。我正在使用 fetch 来获取已保存的 id（我将它们存储在一个假的 rest api，JSON SERVER 中），然后循环遍历它们，对于每个 id，我都在进行 fetch 以检索与 id 关联的特定电影。我正在使用 Promise.All 来实现这一点。将数据推送到空数组后，如果我记录数组，我可以在 console.log() 中取回我需要的内容，但是当我尝试使用 useState() 并将数组传入其中的那一刻开始无限发出请求.也许有人可以指出我正确的方向？谢谢

    let moviesToReturn = []
    
    const [favorites, setFavorites] = useState([])

    let requests = movieId.map(id => {
        return new Promise((resolve, reject) => {
            request({
                url: `https://api.themoviedb.org/3/movie/${id.movieId}?api_key=${movieApikey}`,
                method: 'GET'
            },
                (err, res, body) => {
                    if (err) { reject(err) }                           //function passed to the promise
                    resolve(body)
                })
        })
    })

    Promise.all(requests).then((body) => {
        body.forEach(res => {
            if (res)
                moviesToReturn.push(JSON.parse(res))
                console.log(moviesToReturn, 'movies to return')
               return setFavorites(moviesToReturn)
        })
    }).catch(err => console.log(err))

【问题讨论】：

标签： reactjs json

【解决方案1】：

您需要在初始渲染时调用api，然后设置状态。因此，您需要使用具有空依赖数组的useEffect，如下所示。你这样做的方式会导致应用程序无限渲染它。

此外，setState 函数不返回任何内容。

useEffect(() => {
  let requests = movieId.map((id) => {
    return new Promise((resolve, reject) => {
      request(
        {
          url: `https://api.themoviedb.org/3/movie/${id.movieId}?api_key=${movieApikey}`,
          method: "GET",
        },
        (err, res, body) => {
          if (err) {
            reject(err);
          } //function passed to the promise
          resolve(body);
        }
      );
    });
  });

  Promise.all(requests)
    .then((body) => {
      let moviesToReturn = []; /* keep moviesToReturn array here */

      body.forEach((res) => {
        if (res) moviesToReturn.push(JSON.parse(res));
        console.log(moviesToReturn, "movies to return");
      });

      setFavorites(moviesToReturn);
    })
    .catch((err) => console.log(err));
}, []);

【讨论】：