Reactjs 使用挂钩对负载进行更多的反应

我尝试对数据列表执行

加载更多
，如下所示：

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

因此，请帮助我，如何在React Hooks中加载更多内容？
我将您的示例改为：

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

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

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;

有关详细信息，请访问：





到底是什么不起作用？该示例似乎正确加载下一页。该示例一次仅加载2个数据项。我想要的基本上是在渲染列表中添加更多数据。例如，第一次单击“添加2个数据”，第二次单击“向列表中再添加2个数据”，使列表中的数据总数变为4个，等等。使用注释代码时出现错误是什么？它将显示警告：
React Hook useffect缺少依赖项：“loadData”。包括它或删除依赖项数组
，但如果我将
loadData
添加到依赖项中，它会说
loadData应该在useffect回调内部或在它自己的useffect回调钩子中
这与
const b=[…new Set（[…data，…a.data.data]）]的效果相同。
。它将在浏览器/编译器中显示警告。我可以用
//eslint disable next line
消除编译器警告，但我认为这不是正确的方法。我只是更改了答案。我相信这是你想要的行为。它显示2，然后4，等等，它使用你的代码或我的注释代码工作。但我的问题是，它仍然给我警告。我相信正确的解决方案是
useCallback
，但我不知道如何做到这一点。看到了吗
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;

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