React Hook切换Tab时如何正确修改rowData状态且避免无限循环

问题根因定位 #

• 初始空依赖的useEffect仅在组件首次挂载时执行，激活Tab切换时不会触发重新计算，导致rowData不随Tab变化同步更新
• 错误将rowData加入effect依赖数组，而effect内部逻辑会调用setRowData修改rowData值，每次rowData变化又会重新触发effect执行，最终形成无限循环

核心实现逻辑 #

1. 调整同步rowData的effect依赖
   将依赖数组从空数组[]修改为仅监听activeTab，不要把rowData纳入依赖列表——该effect的触发条件本就应该是「激活Tab值变化」，而非数据自身变化：

   import { useState, useEffect } from 'react'
   
   // 定义两个组件状态
   const [activeTab, setActiveTab] = useState<string>('customers')
   const [rowData, setRowData] = useState<Record<string, any>[]>([])
   
   // 同步表格数据的effect
   useEffect(() => {
     // 根据当前激活Tab加载对应的数据
     const loadMatchedData = () => {
       switch (activeTab) {
         case 'customers':
           return fetchCustomerList() // 替换为实际的业务数据获取逻辑
         case 'orders':
           return fetchOrderList()
         default:
           return []
       }
     }
   
     // 执行数据更新
     loadMatchedData().then(data => setRowData(data))
   }, [activeTab]) // 关键：仅将activeTab放入依赖，rowData绝不加入依赖
   
   // Tab切换处理方法
   const handleChangeTab = (nextTab: string) => {
     setActiveTab(nextTab)
   }
   

   这种实现下，只有activeTab变化时effect才会重新执行，就算effect内部调用setRowData修改rowData，因为rowData不在依赖列表内，也不会重复触发effect，从根源上避免无限循环。

2. 无异步逻辑时的更优实现
   如果不同Tab对应的rowData是纯本地计算、没有异步请求，可以直接用useMemo生成派生值，完全移除rowData状态和对应的effect，从根源减少状态同步逻辑：

   import { useMemo } from 'react'
   
   const [activeTab, setActiveTab] = useState<string>('customers')
   // 直接根据activeTab计算rowData，不需要额外维护state
   const rowData = useMemo(() => {
     switch (activeTab) {
       case 'customers':
         return buildCustomerTableData()
       case 'orders':
         return buildOrderTableData()
       default:
         return []
     }
   }, [activeTab])
   

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