使用钩子加载更多负载

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"));

here中的完整示例。我认为此代码应该可以正常工作，但不能正常工作。

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

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

Answer 1

通过更改为以下示例，我使您的示例可以工作：

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

Answer 2

经过几次尝试，我认为这是我能做的最好的事情。使代码正常工作，但也不要让编译器警告：

import React, { useState, useEffect, useCallback } from "react";
import axios from "axios";

import Navbar from "./Navbar";

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

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

      const params = {
        page,
        per_page: limit
      };

      const a = await axios.get(URL, { params, headers });
      if (!a.data.data) {
        return;
      }

      setData(a.data.data);
      setLoading(false);
    },
    [page]
  );

  useEffect(() => {
    if (!isLoading) {
      return;
    }
    setTube([...new Set([...tube, ...data])]);
  }, [data, isLoading, tube]);

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

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

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

  return (
    <>
      <Navbar />

      <main role="main" className="container">
        <div className="starter-template text-left">
          <h1>Listing</h1>
          <button className="btn text-primary" onClick={evt => doLoadMore(evt)}>
            Load More
          </button>
          <ul>
            {tube &&
              tube.map(a => (
                <li key={a.id}>
                  {a.id}. {a.email}
                </li>
              ))}
          </ul>
          {isLoading && <p>Loading..</p>}
        </div>
      </main>
    </>
  );
};

export default App;

我也发现，只需应用此eslint-disable-next-line react-hooks/exhaustive-deps让编译器忽略该警告可能会容易得多。像这样的东西。

useEffect(() => {
    setConfig({...config, params: {...params, skip}});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [skip]);

有关详细信息，请参见：

• how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook

• https://stackoverflow.com/a/55844055/492593

• react #14920