React动态列表渲染函数组件报Hooks数量超上次渲染错误解决

你犯了React渲染的常见低级错误：直接把函数组件当普通函数调用，而不是用JSX语法渲染为组件元素。
在你的EstateOverview组件里，循环时写的是PropertyGroup(group)，这行代码的效果是直接在EstateOverview的渲染函数上下文里执行PropertyGroup的函数逻辑，根本没有创建独立的PropertyGroup组件实例。这就导致PropertyGroup内部写的useState，全部被React算成了EstateOverview组件调用的Hook。
第一次渲染列表长度是1，EstateOverview里调用了1次useState；第二次异步更新后列表长度是2，EstateOverview里就会调用2次useState，Hook调用数量和顺序直接变了，必然触发你看到的顺序校验警告和“渲染时Hook数量比上次多”的运行时错误。

• 把循环里直接调用组件的写法，改成标准JSX标签渲染，让React正确识别独立组件边界，每个列表项的Hook会归属到自身组件实例，不会污染父组件的Hook调用链。
• 把列表渲染需要的key属性放在循环返回的最外层组件上，不要写在组件内部的根节点上。
• 补全useEffect的依赖数组和定时器清理逻辑，修掉原代码里的隐性性能bug。

修正后的EstateOverview组件代码：

import React from 'react';
import List from '@mui/material/List';
import PropertyGroup from "./PropertyGroup.js";

export default function EstateOverview(props) {
   return ( 
     <List>
       {props.estateOverview.propertyGroups.map((group) => (
         <PropertyGroup key={group.name} name={group.name} />
       ))}
     </List>
   );
}

修正后Estate组件里的useEffect代码：

useEffect(() => {
  const newEstateOverview = {  
    propertyGroups: [
      { name: "The Avenue"},
      { name: "Broadway" }
    ]
  };
  const timer = setTimeout(() => {
     setEstateOverview(newEstateOverview);
  }, 1000 );
  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearTimeout(timer);
}, []); // 空依赖数组，仅组件挂载时执行一次

改完之后每个PropertyGroup都是独立的组件实例，各自维护内部的state，列表增删时React只会正常挂载/卸载对应的组件实例，父组件的Hook调用顺序始终保持稳定，之前的报错会完全消失，每个列表项的独立交互状态也能正常工作。

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