React Hooks 在分页中使用 redux 重新渲染太多

Question

我正在尝试过滤我的数据以显示我的减速器并在第一次渲染中工作。但是，当我尝试使用分页更改页面时出现此错误：

× 重新渲染过多。React 限制渲染次数以防止无限循环 dispatch(GetFilteredData());

当我检查控制台时，我得到了 的无限循环console.log(data2)，但我不知道为什么会这样。

这是我的派遣工作 PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div>

     <p> Filter Data </p> 
    <p>TABLA CON LOS DATOS </p>

    <TablePagination/>

    </div>
  );
};




export default PaisBody;

这是我的减速器：

   import {TableFilter} from 'Layout/Table/TableFilter';

const initialState = {
    page:1,
    pageCount: 0,
    forPage: 10,
    data: '',
    filterAux: '', 
    filteredData: '',
}

const CurrentPage = (state = initialState,action) =>{
    switch(action.type){
        case 'NEXT':
            return {
                ...state,
                page:state.page + 1
            };
        case 'PREV':
            return {
                ...state,
                page:state.page -1
            };
        case 'insertPage':
            return {
                ...state,
                page:action.value
            };
        case 'InsertPageCount':
            return {
                ...state,
                pageCount: Math.ceil(action.value / state.forPage)
            };
        case 'InsertData':  //
            return {
                ...state,
                data: action.value
            };
        case 'GetFilteredData':
            return {
                ...state,
                filteredData: TableFilter(state.data,state.forPage,state.page,state.filterAux)
            };           
        default:
            return state;   
    }
} 

export default CurrentPage;

感谢您的任何帮助或建议！

我不知道分页代码是否有帮助，因为我认为问题在于：

调度（GetFilteredData（））；

Answer 1

在每次渲染时，PaisBody都会被执行，这可能会导致无限循环，因为在每次渲染时，您都会调度一个可能导致重新渲染的操作。

在这种情况下，您应该使用useEffect（使用 dep-array）或useCallback（如果您要共享道具）：

const PaisBody = props => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(InsertData(props.data));
  }, [props.data]);

  useEffect(() => {
    dispatch(InsertPageCount(props.data.length));
  }, [props.data.length]);

  // I guess you want it executed on mount.
  useEffect(() => {
    dispatch(GetFilteredData());
  }, []);

  ...

  return ...
};

请注意，在每次useDispatch调用时，您都会获得一个新实例dispatch，这是一个常见的“性能”问题，应该记住useCallback