如何从 themoviedb api 获取多页结果并将状态存储在 React Native 中？答案

【问题标题】：How do I get multiple pages of result from themoviedb api and store in state in React Native?如何从 themoviedb api 获取多页结果并将状态存储在 React Native 中？
【发布时间】：2020-09-27 17:00:11
【问题描述】：

我被困在试图让第 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 发出另一个请求，并将该数据设置为附加我当前的电影常量...我尝试再次执行 setState([...movies, data.results]) ：

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

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

例如，像这样：

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

如何继续在此处设置的第一个页面的原始页面之后附加第 2 页数据：setMovies(data.results);

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

<FlatList
            data={movies}
/>

【问题讨论】：

标签： javascript react-native themoviedb-api

【解决方案1】：

需要在data.results处添加...，否则会有[movie1,movie2,[movie3,movi4]]

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

【讨论】：

我试过这样做，但我的 flatlist 仍然只显示第一个 api 调用结果...你知道如何在 flatlist 中获取这两个调用的结果以在渲染状态电影数据时显示吗？

【解决方案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 (...)

【讨论】：