React实现API数据分页时如何将currentPage作为参数传递给请求实例

问题定位与修复方案 #

1. API请求URL格式错误 #

你的请求路径存在三个问题：

• 路径拼写错误：/reiews应为/reviews
• 参数拼接逻辑错误：&?page=多写了一个?，正确的多参数拼接应使用&分隔
• 手动拼接参数容易出现编码错误，推荐直接用请求库的params配置项自动处理
  修复后的请求代码：

instance.fetchConfig = (params) => {
  return instance.get(
    "/reviews",
    {
      params: {
        client_id: params.client_id,
        page: params.currentPage
      },
      headers: {
        Authorization: "Bearer " + params.token,
      },
    }
  );
};

2. 分页回调字段取值错误 #

分页组件Paginate触发onPageChanged回调时，传递的参数对象里的页码字段是currentPage，你在App组件里错误取了data.selected，导致永远拿不到正确页码：
修复后的onPageChanged方法：

onPageChanged = (data) => {
  const currentPage = data.currentPage;
  this.setState(
    {
      currentPage: currentPage,
    },
    () => {
      this.receivedData();
    }
  );
};

3. 初始页码为空 #

你在App组件的state里把currentPage初始值设为null，首次加载调用receivedData时会给接口传page=null，导致首次请求失败：
修改App组件state初始值：

this.state = {
  posts: [],
  allPosts: null,
  currentPage: 1, // 初始值改为1
  loading: false,
  widgetStatus: true,
  params: {
    client_id: null,
    localstore_id: null,
    token: null,
    currentPage: 1, // 初始值改为1
  },
};

4. 接口回调逻辑错误 #

你在receivedData的then回调里，当接口返回status === "success"时直接return，后续更新state的代码永远不会执行，导致列表数据不会刷新：
修复后的then逻辑：

.then((response) => {
  if (response.data.status === "success") {
    this.setState({
      posts: [...response.data.data.posts.items],
      allPosts: response.data.data.posts.total,
      loading: false,
    });
  } else {
    // 非成功状态处理逻辑
    this.setState({
      widgetStatus: false,
      loading: false
    })
  }
});

内容的提问来源于stack exchange，提问作者Elichy