基于获取更新状态

Question

我正在尝试获取电影 OMDB API 数据，您可以看到 2 次获取，每次获取仅给出 10 个对象数据的数组，
但每次搜索时数据都会增加，即使我在函数开始时保留即重置状态

setmovieData([])

。

useEffect(
  function () {
    async function requestMovieData() {
      setmovieData([]);
      const res1 = await fetch(
        `http://www.omdbapi.com/?apikey=51b8382f&s=${query}`,
      );
      const res2 = await fetch(
        `http://www.omdbapi.com/?apikey=51b8382f&s=${query}&page=1`,
      );

      const data1 = await res1.json();
      const data2 = await res2.json();

      if ((data1.Response = "True" && data1.Search)) {
        setmovieData([...movieData, ...data1.Search]);
      }
      if ((data2.Response = "True" && data2.Search)) {
        setmovieData([...movieData, ...data2.Search]);
      }
    }

    requestMovieData();
  },
  [query],
);

Answer 1

这里有几个问题...

1. 状态更改是异步的，因此当您添加更多数据时，

   setmovieData([])

   可能不会应用
2. 同样，根据先前的状态设置状态（如

   setmovieData([...movieData, ...data1.Search])

   ）可能会产生不可预见的影响，因为当前状态可能不是您想象的那样

我建议立即获取和收集所有数据，然后设置状态，而不必担心它是什么或曾经是什么

// Stand-alone function that can be defined outside your component
const fetchMovies = async (query, page) {
  const params = new URLSearchParams({
    apikey: '51b8382f',
    s: query,
  });
  if (page) {
    params.append('page', page);
  }

  const res = await fetch(`http://www.omdbapi.com/?${params}`);
  if (!res.ok) {
    throw new Error(`Fetch failed: ${res.status} ${res.statusText}`);
  }
  const {Response, Search} = await res.json();
  return Response === 'True' ? Search : [];
}

useEffect(() => {
  Promise.all([fetchMovies(query), fetchMovies(query, 1)])
    .then((movies) => setmovieData(movies.flat())
    .catch(console.error);
}, [query]);