React + Axios：Rest API while loop all posts（来自 Response headers 的信息）

Question

到目前为止，我有一个 Axios 获取 WP REST API 认证路由的请求。这可以很好地呈现每个请求最多 100 个帖子，还获取响应 header，这表明实际上总共有 894 个帖子和 9 个页面：

constructor(props) {
    super(props);

    this.state = {
      loading: false,
      posts: [],
      error: "",
      items: [],
      result: [],
    };
  }

  createMarkup = (data) => ({
    __html: data,
  });
  componentDidMount() {
    const wordPressSiteURL = clientConfig.siteUrl;
    const authToken = localStorage.getItem("token");
    const result = [];

    this.setState({ loading: true }, () => {
      axios
        .get(`${wordPressSiteURL}/wp-json/kbs/v1/tickets?per_page=100`, {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${authToken}`,
          },
        })
        .then((result) => {
          let totalPosts = result.headers["x-wp-total"];
          let totalPages = result.headers["x-wp-totalpages"];

          console.log(
            `there are ${totalPosts} posts divided in ${totalPages} pages`
          );
          this.setState({
            loading: false,
            items: result.data,
          });
        });
    }); // this state
  }

如何使用响应 header 知识动态循环，以便将所有帖子放在同一页面上？ 请注意，加载时间不是问题在此应用程序的上下文中。

看来我必须用 while 循环重新实现相同的 get 请求，并包含一个 $totalPages 变量作为页面查询参数 '?page=$totalPages'，但如果可以提供一些建议就更好了为我指出正确的方向，如何在此处构建此代码，因为即使走到这一步对我来说也是一个很大的挑战。

Answer 1

你的方法看起来不错！根据您所说的，听起来您完全走上了正轨 - 您需要使用循环在页面限制以下时继续请求更多数据。您可以使用这样的东西（显然这是未经测试的，但希望能让您走上正确的轨道）：

async componentDidMount() {
    const wordPressSiteURL = clientConfig.siteUrl;
    const authToken = localStorage.getItem("token");

    let posts = [];
    let hasMorePages = true;

    for (let pageNumber = 0; hasMorePages; pageNumber++) {
        const params = new URLSearchParams();
        params.append('per_page', 100);
        if (pageNumber > 0) {
            params.append('page', pageNumber);
        }
        
        const url = `${wordPressSiteURL}/wp-json/kbs/v1/tickets?${params}`;
        const result = await axios.get(url, {
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${authToken}`,
            },
        });

        posts = [...posts, result.data];

        const postsOnThisPage = result.data.length;
        const totalPages = result.headers["x-wp-totalpages"];
        console.log(`Loaded page ${pageNumber}/${totalPages} which contained ${postsOnThisPage} posts.`)
        
        hasMorePages = postsOnThisPage > 0 && pageNumber < totalPages;
    }

    this.setState({
        loading: false,
        posts,
    });
}

注意：您也可以在构造函数中将 loading 的值设置为 true，因为组件在挂载时要做的第一件事就是开始加载。这将为您节省一次额外的状态更改（为您节省一次额外的渲染）。

constructor(props) {
    super(props);

    this.state = {
        loading: true,
        posts: [],
        error: "",
        items: [],
        result: [],
    };
}

React + Axios：Rest API while loop all posts（来自 Response headers 的信息）

React + Axios: Rest API while loop all posts (with info from Response headers)

reactjs

wordpress

axios

rest

request-headers