如何从 themoviedb api 获取多页结果并存储在 React Native 中的 state 中？

Question

我一直试图在相同的 state 中获得第 2 页的结果...请查看我的代码并帮助我。

    const URL = 'https://api.themoviedb.org/3/movie/now_playing?api_key=#&language=en-US&page=1';
    const [movies, setMovies] = useState([]);

    const testapi = async() => {
      const response = await fetch(urlGiven);
      const data = await response.json();
      setMovies(data.results);
    }

现在我正在尝试使用 &page=2 向 api 发出另一个请求，并将该数据设置为 append 我当前的电影常量...我尝试再次执行 setState([...movies, data.results]) ：

https://api.themoviedb.org/3/movie/now_playing?api_key=#&language=en-US&page=2

PAGE 2 数据，但在 react native flatlist 中未正确呈现。

例如，像这样：

const secondCALL = async() => {
    const response = await fetch(page2URL);
    const data = await response.json();
    setMovies([...movies, data.results]);
}

我如何 go 关于在此处设置的原始页面之后附加第 2 页数据：setMovies(data.results);

例如，我的平面列表设置（仅显示相关部分）

<FlatList
            data={movies}
/>

Answer 1

您需要在 data.results 中添加...，否则您将拥有 [movie1, movie2, [movie3, movi4]]

const secondCALL = async() => {
   const response = await fetch(page2URL);
   const data = await response.json();
   setMovies([...movies, ...data.results]);
}

Answer 2

您需要使用扩展运算符语法来扩展 data.results 的内容。

考虑这个例子：

const [movies, setMovies] = useState([]);
const [page, setPage] = useState(1);


const getMovies = async () => {
  try{
    let req = await fetch(`'https://api.themoviedb.org/3/movie/now_playing?api_key=#&language=en-US&page=${page}`);
    let data = await req.json();
    // spread the content of movies and data 
    setMovies([...movies, ...data]);
  }catch(err){
   throw err
  }
}

return (...)