反应钩子 使用 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;

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

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

dispatch(GetFilteredData(((;

Answer 1

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

在这种情况下，你应该使用useEffect(带有 dep-array(或useCallback(如果你要分享 props(：

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