我的工作React表和自定义过滤器。
在我的例子中，我有过滤器组件和React表组件，它们是兄弟组件，当用户从过滤器组件的下拉列表中选择一个值时，该值属于使用React表中的useSelector（redux工具包）接收的特定列，但过滤不起作用。
下面是filter组件的代码块
const ColumnFilter = ({ column }) => {
const { filterValue, setFilter } = column;
const { filterSliceData } = useSelector(getDataSlice);
if (filterSliceData) {
setFilter(filterSliceData);
}
return (
<></>
);
};当我从下拉列表中选择过滤器时，我收到一些错误。
下面是我在codesandbox. https://codesandbox.io/s/react-table-column-filter-component-c5wbc7中创建的完整示例
1条答案
按热度按时间dwthyt8l1#
您在ColumnFilter.js中的逻辑会导致无限的重新呈现循环，因为它不断导致提示重新呈现ColumnFilter的状态更改。
filterSliceData是truthy，它告诉它调用setFilter，setFilter提示列重新呈现，setFilter重新呈现ColumnFilter，其中filterSliceData是truthy，依此类推。听起来您需要的是一种在外部组件更改时更改筛选器值的方法。
useFilter钩子公开了一个setFilter方法，您可以使用该setFilter方法根据useSelector中的值更新所需列的筛选器值。以useEffect或类似的hook.I forked your CodeSandbox为例，这种方法的主要缺点是它将特定的全局状态变量与表本身紧密地联系在一起，因此可能需要一些额外的逻辑来抽象出您想要的结果。