Question

我正在尝试过滤我的数据以与我的reducer一起显示并在第一个渲染中工作。但是，当我尝试使用分页更改页面时，出现以下错误：

× 重新渲染过多。 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;

谢谢您的帮助或建议！

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

dispatch（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的新实例，该实例是a common "performance" issue，应该用useCallback来记住

在Redux分页中，React Hooks太多重新渲染

1 个答案: