React组件添加条件判断后触发“Rendered fewer hooks than expected”错误的原因定位

你遇到的这个错误看起来是加了if (el.parentNode)之后才出现的，但其实这个条件判断本身并不是问题的根源——真正的违规是你违反了React Hooks的核心规则，只是刚好这个修改触发了React的hooks检测机制而已。

先明确React Hooks的两条铁律，这是必须严格遵守的：

• 只能在函数组件的顶层作用域调用Hooks
• 绝对不能在循环、条件判断、嵌套函数（比如数组map的回调函数）里调用Hooks

看你的FilePreviews组件代码，在files.map((file, index) => { ... })这个循环回调里面，你直接调用了两个Hooks：

const containerRef = useRef<HTMLDivElement>(null);
const [hovered, setHovered] = useState(false);

这就直接踩了红线——Hooks必须在组件的顶层调用，不能出现在循环迭代的回调里，这种写法会彻底打乱React管理Hooks的调用顺序，进而触发“Rendered fewer hooks than expected”这类错误。

至于为什么之前没报错，加了清理函数的条件后才触发？其实React的hooks检测是基于调用顺序的，有时候代码结构的小变化（比如清理函数里加了判断）会让React的检测逻辑更敏感，把原本就存在的隐性问题暴露出来。那个if (el.parentNode)的判断是在useEffect的清理函数里，本身是完全合法的，它只是个“导火索”，不是真正的问题。

修复方案 #

解决方法很简单，把循环里的每个文件项抽成一个独立的子组件，比如叫FilePreviewItem，把containerRef、hovered这些Hooks移到子组件的顶层作用域里，这样每个子组件的Hooks调用都是符合规则的：

举个简化的修复示例：

// 抽离独立的子组件
function FilePreviewItem({
  file,
  index,
  onRemoveFile,
  onEditClick,
  multiple
}: {
  file: FileData;
  index: number;
  onRemoveFile?: (index: number) => void;
  onEditClick?: (index: number) => void;
  multiple: boolean;
}) {
  // 现在Hooks在子组件的顶层调用，完全符合规则
  const containerRef = useRef<HTMLDivElement>(null);
  const [hovered, setHovered] = useState(false);

  // 可以把原来的renderFilename、renderOverlay逻辑也移到这里，或者保持原样调用
  const renderFilename = () => 
    multiple ? (
      <Row
        align="center"
        alignItems="center"
        className="absolute bottom-0 flex h-7 overflow-hidden border-t border-border p-2 text-xs"
        locked
      >
        <span className="truncate text-ellipsis whitespace-nowrap">
          {file.name}
        </span>
      </Row>
    ) : null;

  const renderOverlay = () => (
    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
      <IconEdit size={40} className="text-background" />
    </div>
  );

  return (
    <div
      ref={containerRef}
      className={cn(
        'group relative cursor-pointer overflow-hidden border border-border bg-background',
        {
          'aspect-w-1 aspect-h-1 w-full rounded-md pb-7': multiple,
          'flex h-32 w-32 items-center justify-center rounded-full': !multiple,
        }
      )}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => {
        if (onEditClick) onEditClick(index);
      }}
    >
      {/* 原来的RemoveButtonPortal、图片/图标、文件名等内容 */}
      {onRemoveFile && (
        <RemoveButtonPortal
          index={index}
          onRemoveFile={onRemoveFile}
          containerRef={containerRef}
          hovered={hovered}
          multiple={multiple}
        />
      )}
      {renderOverlay()}
      {/* ... 其余原有渲染逻辑 */}
      {multiple && renderFilename()}
    </div>
  );
}

// 改造后的FilePreviews主组件
export function FilePreviews({
  files,
  onRemoveFile,
  onEditClick,
  multiple = true,
  className,
}: FilePreviewsProps) {
  return (
    <div
      className={cn(
        'w-full gap-2 rounded bg-subtle p-3',
        { 'grid grid-cols-4 md:grid-cols-8': multiple },
        { 'flex justify-center': !multiple },
        className,
      )}
    >
      {files.map((file, index) => (
        <FilePreviewItem
          key={index}
          file={file}
          index={index}
          onRemoveFile={onRemoveFile}
          onEditClick={onEditClick}
          multiple={multiple}
        />
      ))}
    </div>
  );
}

记住，React完全依赖Hooks的调用顺序来管理状态，只要你在循环、条件或者嵌套函数里调用Hooks，就会破坏这个顺序，导致各种难以预料的错误——有时候不会立刻报错，但早晚会暴露问题，所以一定要严格遵守Hooks规则。

备注：内容来源于stack exchange，提问作者wyc