Find the most frequent custom hooks—– page posts

What is paging

One of the largest types of requests in all projects, mainly applied to a large amount of data cannot be rendered or displayed at the same time, with the help of the Table component to render, or after the bottom of the drop triggered a new request, add additional data.

So, how to package fast, simple, and effective hooks to make code simpler and easier to use is the goal.

In the code

The code is introduced

This is my own encapsulation hooks, foreign provided a list, the total, params, getList, hasMore several properties, under the cover

Total: indicates the total number of data returned by a storage port

Params: parameter data used in the current query

HasMore: Whether there is more data, which is an extension of total data, to determine whether there is more data after the current page, basically used for append rendering

Void getList (param,option)=>void: call the request,param will merge with the above params parameter,option is used to set whether data is appended or overwritten

List: is an array of data that you return yourself.

advantages

This is especially useful in business scenarios where multiple parameters are required and are not in the same component. With the help of state management, simple data passing and invocation are realized.

example

It’s nice to have two properties that can be set inside two components and coexist.

Further, if params is also used within each component, then it is possible to change the data of component A in component B.

Even if you only use it inside a single component, you can save a lot of space and split business and rendering.

disadvantages

Understand a few more difficult, novice look, is an important step to improve their oh

Hooks code

import { useState, useEffect, useCallback } from "react";
import { getXXXList } from "@/service/XXXService";
​
// Custom page turn request hooks
function useList({ api, initialParams }) {
  // Interface parameters
  const [params, setParams] = useState(initialParams);
  / / data
  const [list, setList] = useState([]);
  // Is there more data available
  const [hasMore, setHasMore] = useState(true);
  / / the total number of
  const [total, setTotal] = useState(0);
  // Whether to overlay or turn pages
  const [add, setAdd] = useState(false);
  // hooks do not execute useEffect the first time, need to invoke getList to trigger useEffect
  const [key, setKey] = useState(false);
​
  // Combine parameters
  const getList = useCallback(
    (param, option = {}) = > {
      const { isAdd = false} = option; setParams({ ... params, ... param }); setAdd(isAdd); setKey(true);
    },
    [params]
  );
​
  useEffect(() = > {
    if(! key) {return;
    }
    api(params).then((res) = > {
      if(! res) {return;
      }
      const{ pageSize, pageNo, items } = res; setHasMore(pageSize * pageNo < res.total); setTotal(res.total); setList(! add ? items : [...list, ...items]); }); }, [params, add, key]);return { getList, list, hasMore, total, params };
}
​
// Test the component
function Test() {
  const { list, getList } = useList({
    api: getXXXList,
    initialParams: {
      pageSize: 10.pageNo: 1,}});const onClick = useCallback(() = > {
    const pageSize = Math.floor(Math.random() * 10);
    getList({
      pageSize,
    });
  }, [getList]);
​
  useEffect(() = >{ getList(); } []);return (
    <div>
      <Button onClick={onClick}>Click to make a request</Button>
      {list.map((listItem) => (
        <ListItem item={listItem}></ListItem>
      ))}
    </div>
  );
}
​
function ListItem({ item }) {
  return <div></div>;
}
​
Copy the code

conclusion

You can modify the current hooks based on your project, or use them directly.

Every day progress a hundred million points, promotion and salary increase married baifumei is not a dream!! May all my dreams come true…