Question

使用 Hooks 实现 React 的更多加载

2019-10-07

5012

reactjs

我尝试对下面写的数据列表执行 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 中执行 Load More？

Answer 1

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

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

有关信息，请参见：

Answer 2

我通过将其更改为以下内容使您的示例能够正常工作：

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

Brian Thompson

2019-10-07