Chakra-paginator - Next.js - Chakra UI - 内存泄漏 可能仅在 Next.js 中出错

问题描述

错误

我的 next.js 应用程序使用 chakra-paginator，当我在页面上调用 toast 时使用 chakra-paginator 时，浏览器控制台显示错误：

警告：无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentwillUnmount 方法中的所有订阅和异步任务。 ToastManager@http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1627303273546:38352:5

查找错误

我发现了这个错误，因为当我删除所有 chakra-paginator 组件和钩子时，Toast 工作正常。

可能仅在 Next.js 中出错

当我在 codeandBox.io 中仅在 clear React + TS toast 中尝试它时，它可以正常工作。我认为问题出在 chakra-paginator 和 next.js 之间。

我的代码

import React,{ FC,ChangeEvent,useEffect,useState } from "react";
import {
  Grid,Center,Select,ButtonProps,Text,Button,usetoast,} from "@chakra-ui/react";
import {
  Paginator,Container,PrevIoUs,usePaginator,Next,PageGroup,} from "chakra-paginator";

const fetchPokemons = (pageSize: number,offset: number) => {
  return fetch(
    `https://pokeapi.co/api/v2/pokemon?limit=${pageSize}&offset=${offset}`
  ).then((res) => res.json());
};

const Poke: FC = () => {
  // react hooks
  const [pokemonsTotal,setPokemonsTotal] = useState<number | undefined>(
    undefined
  );
  const [pokemons,setPokemons] = useState<any[]>([]);
  const toast = usetoast();
  // constants
  const outerLimit = 2;
  const innerLimit = 2;

  const {
    isdisabled,pagesQuantity,currentPage,setCurrentPage,setIsdisabled,pageSize,setPageSize,offset,// you may not need this most of the times,but it's returned for you anyway
  } = usePaginator({
    total: pokemonsTotal,initialState: {
      pageSize: 10,currentPage: 1,isdisabled: false,},});

  // effects
  useEffect(() => {
    fetchPokemons(pageSize,offset).then((pokemons) => {
      setPokemonsTotal(pokemons.count);
      setPokemons(pokemons.results);
    });
  },[currentPage,offset]);

  // styles
  const baseStyles: ButtonProps = {
    w: 7,fontSize: "sm",};

  const normalStyles: ButtonProps = {
    ...baseStyles,_hover: {
      bg: "green.300",bg: "red.300",};

  const activeStyles: ButtonProps = {
    ...baseStyles,_hover: {
      bg: "blue.300",bg: "green.300",};

  const separatorStyles: ButtonProps = {
    w: 7,bg: "green.200",};

  // handlers
  const handlePageChange = (nextPage: number) => {
    // -> request new data using the page number
    setCurrentPage(nextPage);
    console.log("request new data with ->",nextPage);
  };

  const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
    const pageSize = Number(event.target.value);

    setPageSize(pageSize);
  };

  const handledisableClick = () => {
    return setIsdisabled((oldState) => !oldState);
  };

  return (
    <>
      <Paginator
        isdisabled={isdisabled}
        activeStyles={activeStyles}
        innerLimit={innerLimit}
        currentPage={currentPage}
        outerLimit={outerLimit}
        normalStyles={normalStyles}
        separatorStyles={separatorStyles}
        pagesQuantity={pagesQuantity}
        onPageChange={handlePageChange}
      >
        <Container align="center" justify="space-between" w="full" p={4}>
          <PrevIoUs>
            PrevIoUs
            {/* Or an icon from `react-icons` */}
          </PrevIoUs>
          <PageGroup isInline align="center" />
          <Next>
            Next
            {/* Or an icon from `react-icons` */}
          </Next>
        </Container>
      </Paginator>
      <Center w="full">
        <Button onClick={handledisableClick}>disable ON / OFF</Button>
        <Select w={40} ml={3} onChange={handlePageSizeChange}>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
        </Select>
      </Center>
      <Button
        onClick={() => {
          toast({
            title: "new toast",duration: 4000,});
        }}
      >
        Toast
      </Button>
      <Grid
        templateRows="repeat(2,1fr)"
        templateColumns="repeat(5,1fr)"
        gap={3}
        px={20}
        mt={20}
      >
        {pokemons?.map(({ name }) => (
          <Center p={4} bg="green.100" key={name}>
            <Text>{name}</Text>
          </Center>
        ))}
      </Grid>
    </>
  );
};

export default Poke;
enter code here

Toast 在 next.js 的这段代码中不起作用，但在 React.js 中它起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）