React订单筛选功能触发无限循环问题求助

核心问题根源梳理 #

1. useEffect依赖与更新逻辑的循环触发
   你的useEffect将listCommand和filterDate作为依赖，但内部又执行了setListCommand(ifIsCommand)和getAllCommandAllClientsAdminService(dispatch)：

   • 当listCommand被修改时，useEffect会重新执行，再次调用setListCommand更新listCommand，直接形成循环。
   • getAllCommandAllClientsAdminService会触发redux状态更新，useSelector拿到新的ifIsCommand后又通过setListCommand更新本地状态，进一步加剧循环。

   useEffect(()=>{
       setListCommand(ifIsCommand)
       getAllCommandAllClientsAdminService(dispatch)
   },[listCommand, filterDate])
   

2. 渲染阶段直接修改状态导致循环
   ResultChoiceDateCommand函数如果是在组件渲染过程中执行（比如直接在JSX中调用或顶层执行），每次组件渲染时它都会根据filterDate调用setListCommand，触发组件重新渲染，进而再次执行该函数，形成无限循环。

   另外，Array.sort()是原地修改数组的方法，你用它处理后直接setListCommand，虽然看似更新了状态，但数组引用未变，可能导致React的状态更新判断异常；而filter返回新数组，会触发明确的状态更新，这也是当日订单选项循环更明显的原因。

3. 顶层计算的变量触发不必要的状态更新
   filterListCommandOfDay定义在组件顶层，每次组件渲染都会重新计算。当listCommand变化时，这个变量会生成新的数组引用，在ResultChoiceDateCommand中被用来setListCommand，再次触发状态更新和组件渲染。

修复建议 #

1. 调整useEffect的依赖与逻辑

   • 移除listCommand作为useEffect的依赖，避免状态更新触发自身重新执行。
   • 仅在组件初始化或filterDate变化时获取数据，或者将redux状态直接作为数据源，不需要本地状态listCommand同步：

     useEffect(()=>{
         getAllCommandAllClientsAdminService(dispatch)
     },[filterDate])
     
     // 直接使用redux中的数据，不需要本地state同步
     const listCommand = useSelector(state=> state?.reducerCommandAdmin?.state)
     

2. 避免在渲染阶段修改状态

   • 将ResultChoiceDateCommand改为纯函数，只返回处理后的数组，不直接调用setListCommand。在filterDate变化时，或者在useMemo中处理数据，而不是渲染时修改状态：

     const getFilteredList = () => {
         if (filterDate === "oldDay") {
             // 先拷贝数组再排序，避免原地修改原数据
             return [...listCommand].sort((a, b) => new Date(a.dateDuJour) - new Date(b.dateDuJour))
         }
         if (filterDate === "recentDate") {
             return [...listCommand].sort((a, b) => new Date(b.dateDuJour) - new Date(a.dateDuJour))
         }
         if (filterDate === "dateOfDay") {
             const filtered = listCommand?.filter(item => item.dateDuJour === dateOfDay)
             return filtered.length > 0 ? filtered : []
         }
         return listCommand
     }
     
     // 在渲染时使用处理后的数组
     const filteredList = getFilteredList()
     

3. 优化日期计算与过滤逻辑

   • 将dateOfDay的计算放在useMemo中，避免每次渲染重复计算：

     const dateOfDay = useMemo(() => {
         const year = new Date().getFullYear()
         const day = String(new Date().getDate()).padStart(2, '0')
         const month = String(new Date().getMonth() + 1).padStart(2, '0')
         return `${year}-${month}-${day}`
     }, [])
     

   • 过滤逻辑也可以用useMemo缓存，仅在listCommand或dateOfDay变化时重新计算：

     const filteredList = useMemo(() => {
         // 放入上面的过滤排序逻辑
     }, [listCommand, filterDate, dateOfDay])
     

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