reactjs - React Load More 使用 Hooks

Question

我尝试对Load More如下所示的数据列表进行操作：

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import axios from "axios";
import "./style.css";

const App = () => {
  const LIMIT = 2;
  const [data, setData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  const loadData = async (skip = 1, limit = LIMIT) => {
    const URL = "https://reqres.in/api/users";
    const headers = {
      "Content-Type": "application/json",
      Accept: "application/json"
    };

    const params = {
      page: skip,
      per_page: limit
    };

    const a = await axios.get(URL, { params, headers });
    // const b = [...new Set([...data, ...a.data.data])]; <-- setting this will thrown error
    setData(a.data.data);
    setLoading(false);
  };

  useEffect(() => {
    setLoading(true);
    loadData(page);
  }, [page]);

  useEffect(() => {
    console.log("page", page, "data", data.length);
  }, [page, data]);

  const doReset = evt => {
    evt.preventDefault();
    setPage(1);
  };

  const doLoadMore = evt => {
    evt.preventDefault();
    setPage(page + 1);
  };

  return (
    <div className="container">
      <h1>Listing</h1>
      <button className="btn text-primary" onClick={evt => doReset(evt)}>
        Reset
      </button>
      <button className="btn text-primary" onClick={evt => doLoadMore(evt)}>
        Load More
      </button>
      {isLoading && <p>Loading..</p>}
      {!isLoading && (
        <ul>
          {data.map(a => (
            <li key={a.id}>
              {a.id}. {a.email}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

render(<App />, document.getElementById("root"));

一个完整的工作示例在这里。我认为这段代码应该可以工作，但不是。

const a = await axios.get(URL, { params, headers });
const b = [...new Set([...data, ...a.data.data])];
setData(b);

所以请帮忙，如何在 React Hooks 中加载更多？

标签： reactjs

Answer 1

我通过更改为您的示例来工作：

const b = [...data, ...a.data.data];
setData(b);