ReactJS：函数内if语句调用setState导致无限渲染如何解决

你碰到无限重渲染的核心原因是违反了React渲染纯函数原则：

• 你给style属性传的displayTab会在组件每次渲染时同步执行，属于渲染流程的一部分
• 渲染流程中绝对不能直接调用setState：状态更新会触发新一轮渲染，新一轮渲染又会执行displayTab再次触发状态更新，直接形成「渲染→改状态→重渲染→改状态」的死循环
• 你写在displayTab里的setTabIndex属于副作用逻辑，根本不应该放在样式计算函数里

核心思路：把样式计算和状态更新逻辑拆分开，样式计算保持纯函数无副作用，状态更新放到渲染完成后的副作用钩子中执行。

步骤1：拆分纯样式计算函数 #

把displayTab改成只负责返回样式的纯函数，移除所有状态更新逻辑：

const getTabStyle = (dataLength: number) => {
  return dataLength === 0 ? { display: "none" } : { display: "flex" }
}

步骤2：统一管理Tab配置，避免重复代码 #

把4个Tab的配置整理成数组，方便后续统一计算可见性：

const tabList = [
  { label: "Tab 1", dataLength: dataGames.length, a11yConfig: a11yProps(0) },
  { label: "Tab 2", dataLength: dataTvShows.length, a11yConfig: a11yProps(1) },
  { label: "Tab 3", dataLength: dataMovies.length, a11yConfig: a11yProps(2) },
  { label: "Tab 4", dataLength: dataSpotify.length, a11yConfig: a11yProps(3) },
]

步骤3：用useEffect处理tabIndex更新 #

把更新tabIndex的逻辑放到useEffect里，这个钩子会在组件渲染完成后执行，不会打断渲染流程，也不会触发死循环：

useEffect(() => {
  // 找到第一个有数据、需要显示的Tab索引
  const firstVisibleIndex = tabList.findIndex(tab => tab.dataLength > 0)
  // 只有找到有效索引、且和当前tabIndex不一致时才更新，避免无意义重渲染
  if (firstVisibleIndex !== -1 && firstVisibleIndex !== tabIndex) {
    setTabIndex(firstVisibleIndex)
  }
}, [dataGames.length, dataTvShows.length, dataMovies.length, dataSpotify.length, tabIndex])

步骤4：渲染Tab组件 #

渲染时直接调用纯样式函数即可，不要带任何副作用：

{tabList.map((tab, idx) => (
  <Tab
    key={tab.label}
    label={tab.label}
    {...tab.a11yConfig}
    style={getTabStyle(tab.dataLength)}
  />
))}

如果你只需要在组件首次加载时设置默认选中的tab，不需要在数据变化时自动切换，那可以直接在useState初始化时计算好初始值，连useEffect都不需要：

const getInitialTab = () => {
  if (dataGames.length) return 0
  if (dataTvShows.length) return 1
  if (dataMovies.length) return 2
  if (dataSpotify.length) return 3
  return 0
}
const [tabIndex, setTabIndex] = useState<number>(getInitialTab);

// 后续渲染时样式计算依然用纯函数即可
const getTabStyle = (dataLength: number) => dataLength === 0 ? {display:"none"} : {display:"flex"}

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