javascript - 在数组中推送许多对象会删除数组中所有先前的对象(使用 Hooks 进行 react )

Question

我想在 forEach 的每个循环中将一个对象推送到数组中， 但是在每次循环中，似乎我的数组都变空了，所以我的数组只有最后一个对象被插入，

看起来我的代码中的这一行不起作用:

setSeriesLikedDetails([...seriesLikedDetails, dataSerieDetail.data]);

因为当我这样做时

console.log("seriesLikedDetails ", seriesLikedDetails);

数组中总是有 1 个对象(最后一个插入的对象)，而不是一个对象数组。

这是该组件的部分代码:

function Likes(props) {
  const [moviesLiked, setMoviesLiked] = useState([]);
  const [seriesLiked, setSeriesLiked] = useState([]);
  const [moviesLikedDetails, setMoviesLikedDetails] = useState([]);
  const [seriesLikedDetails, setSeriesLikedDetails] = useState([]);

  useEffect(() => {
    loadMoviesLikedDetails();
    loadSeriesLikedDetails();
  }, [moviesLiked, seriesLiked]);

  async function loadMoviesLikedDetails() {
    setMoviesLikedDetails([]);
    moviesLiked.forEach(async movie => {
      try {
        const dataMovieDetail = await axios.get(
          `https://api.themoviedb.org/3/movie/${movie}?api_key=381e8c936f62f2ab614e9f29cad6630f&language=fr`
        );
        console.log("MovieDetail ", dataMovieDetail.data);
        setMoviesLikedDetails(movieDetails => [
          ...movieDetails,
          dataMovieDetail.data
        ]);
      } catch (error) {
        console.error(error);
      }
    });
  }

  async function loadSeriesLikedDetails() {
    setSeriesLikedDetails([]);
    seriesLiked.forEach(async serie => {
      try {
        const dataSerieDetail = await axios.get(
          `https://api.themoviedb.org/3/tv/${serie}?api_key=381e8c936f62f2ab614e9f29cad6630f&language=fr`
        );
        console.log("SerieDetail ", dataSerieDetail.data);
        setSeriesLikedDetails(serieDetails => [
          ...serieDetails,
          dataSerieDetail.data
        ]);
      } catch (error) {
        console.error(error);
      }
    });
  }

Answer 1

这很可能是因为在 forEach 回调中，seriesLikedDetails 始终是相同的引用，而 setSeriesLikedDetails 会更改您要跟踪的实际数组。

因此，当您进行 forEach 的最后一次迭代时，只需将最后一个值添加到初始数组并将其设置为当前数组。

通过这样做:

async function loadSeriesLikedDetails() {
    const newArray = [...seriesLikedDetails];
    const promises = seriesLiked.map(async serie => {
      try {
        const dataSerieDetail = await axios.get(
          `https://api.themoviedb.org/3/tv/${serie}?api_key=381e8c936f62f2ab614e9f29cad6630f&language=fr`
        );
        console.log("SerieDetail ", dataSerieDetail.data);

        newArray.push(dataSerieDetail.data);
      } catch (error) {
        console.error(error);
      }
    });
    Promise.all(promises).then(()=>setSeriesLikedDetails(newArray));

  }

您将使用正确的新值更新状态一次。