React+Material-UI+Redux过滤数据触发Too many re renders问题求助

首先明确：这个错误本质是组件渲染过程中触发了状态（或Redux store）的重复更新，导致渲染-更新的循环。最优解法不需要用两个useEffect，反而应该根据场景选择useMemo或单个useEffect来控制计算时机。

场景一：过滤结果仅当前组件使用（推荐用useMemo） #

如果过滤后的数据只在当前组件展示，不需要存入Redux，直接用useMemo缓存衍生数据即可，避免额外的状态更新触发重复渲染。

示例代码：

import { useSelector } from 'react-redux';
import { useMemo } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const FilteredList = () => {
  // 从Redux获取源数据和过滤条件
  const sourceData = useSelector(state => state.products.list);
  const activeCategory = useSelector(state => state.filters.category);

  // 仅在源数据或过滤条件变化时重新计算过滤结果
  const filteredData = useMemo(() => {
    if (activeCategory === 'all') return sourceData;
    return sourceData.filter(item => item.category === activeCategory);
  }, [sourceData, activeCategory]);

  return (
    <>
      <Select value={activeCategory}>
        <MenuItem value="all">全部分类</MenuItem>
        <MenuItem value="electronics">电子产品</MenuItem>
        <MenuItem value="furniture">家居</MenuItem>
      </Select>
      <div className="list-container">
        {filteredData.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </>
  );
};

场景二：过滤结果需要多组件复用（用单个useEffect） #

如果过滤后的数据要存在Redux供其他组件使用，用单个useEffect监听依赖变化，触发dispatch更新store即可，无需拆分多个useEffect。

示例代码：

import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { setFilteredProducts } from '../redux/slices/productsSlice';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const FilterController = () => {
  const dispatch = useDispatch();
  const sourceData = useSelector(state => state.products.list);
  const activeCategory = useSelector(state => state.filters.category);

  // 仅在依赖变化时计算并更新Redux中的过滤结果
  useEffect(() => {
    const result = activeCategory === 'all' 
      ? sourceData 
      : sourceData.filter(item => item.category === activeCategory);
    dispatch(setFilteredProducts(result));
  }, [sourceData, activeCategory, dispatch]); // dispatch是Redux稳定函数，加入依赖不会触发额外渲染

  const filteredData = useSelector(state => state.products.filtered);

  return (
    <>
      <Select value={activeCategory}>
        <MenuItem value="all">全部分类</MenuItem>
        <MenuItem value="electronics">电子产品</MenuItem>
        <MenuItem value="furniture">家居</MenuItem>
      </Select>
      <div className="list-container">
        {filteredData.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </>
  );
};

关键注意点 #

• 避免在组件渲染阶段直接调用setState或dispatch：这是导致无限渲染循环的核心原因，所有状态更新逻辑必须放在useEffect或事件回调中
• 依赖项必须准确：useMemo和useEffect的依赖数组要包含所有参与计算的变量，否则会出现数据不一致或重复触发的问题
• 优先用useMemo处理衍生数据：不需要存入状态的计算结果，直接用useMemo缓存，减少不必要的状态更新

内容的提问来源于stack exchange，提问作者lucas barbosa