Javascript/React 中的 API 请求分页？答案

【问题标题】：Pagination on API requests in Javascript/React?Javascript/React 中的 API 请求分页？
【发布时间】：2020-06-10 22:47:15
【问题描述】：

我有一个从电影 API 获取数据的应用。它从第 1 页返回 20 个项目。我将如何添加分页功能并允许用户单击增加页码值并从该页面返回项目的按钮？

这是我的 API 调用：

export const API_KEY = process.env.REACT_APP_MOVIES_API;
export const baseURL = 'https://api.themoviedb.org/3/movie/';
export const language = '&language=en';
export const region = '&region=gb';
export const currentPage = 1;

export const fetchTopRatedMovies = async () => {
  try {
    const response = await fetch(
      `${baseURL}top_rated?api_key=${API_KEY}${language}&page=${currentPage}${region}`
    );
    const data = await response.json();
    console.log('TOP RATED', data);
    return data;
  } catch (err) {
    console.log(err);
  }
};

我想我需要根据请求将 1 添加到 currentPage 但我不确定如何设置。

函数在 React 函数组件中使用 useEffect 调用。

 const [apiData, setApiData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const { results = [] } = apiData;

  useEffect(() => {
    setLoading(true);
    fetchTopRatedMovies().then((data) => setApiData(data));
    setLoading(false);
  }, []);

【问题讨论】：

不要从 process.env 中提取 API_KEY。

标签： javascript reactjs react-hooks

【解决方案1】：

您需要将currentPage 设为fetchTopRatedMovies 的参数，以便您可以从功能组件传递动态值。

您应该像这样在功能组件的状态下控制当前查看的页面：

const [currentPage, setCurrentPage] = useState(1);

然后您可以在功能组件的渲染中添加一个按钮，该按钮在onClick 处理程序中设置currentPage 的新值并触发API 调用。大概是这样的：

<MyButton onClick={() => {
    setCurrentPage(currentPage + 1);
    fetchTopRatedMovies(currentPage).then(data => setApiData(data));
}}>

我说大概是因为您可以利用useEffect 在每次状态/道具更改时重新运行 API 请求，而不是立即调用 fetchTopRatedMovies。或者更好的是，仅在有有意义的状态/道具更改时才使用useEffect 触发 API 请求。

fetchTopRatedMovies 方法应该这样改进：

export const fetchTopRatedMovies = async (pageNumber) => {
  try {
    const response = await fetch(
      `${baseURL}top_rated?api_key=${API_KEY}${language}&page=${pageNumber}${region}`
    );
    const data = await response.json();
    console.log('TOP RATED', data);
    return data;
  } catch (err) {
    console.log(err);
  }
};

这种方法可以扩展到 API 调用的所有其他参数。

希望这会有所帮助！

【讨论】：

这有帮助，谢谢。您是否建议在单独的按钮组件或每个单独的页面上管理页码的状态？我计划为其他 api 请求添加更多页面。或者在 Context 中管理 pageNumber？
无论您的技术选择是什么（redux / context / state），您都需要使 currentPage 变量与页面状态保持一致。在第一个实现中，我会将其保留在页面级别，然后您可以将其移动到 redux-store 或上下文中。

【解决方案2】：

通常是通过将 currentPage 添加到状态中来制作的，例如

const [currentPage, setCurrentPage ] = useState(1);

所以当你想通过点击或滚动来改变它时，使用 setCurrentPage 并且在你的 api 调用中它仍然会使用 currentPage 但现在它会引用状态中的那个。

【讨论】：