📋 问题描述

在使用 Ant Design Table 组件时，尝试将包含 useState Hook 的代码从子组件内联到 Column 的 render 回调中，导致页面黑屏。

场景还原

原始实现（正常工作）：

// editButton.tsx - 独立子组件
import { Button } from "antd";
import { EditModal } from "./edit";
import { useState } from "react";

export default function EditButton({ data }) {
  const [editOpen, setEditOpen] = useState(false);

  const onEdit = () => {
    setEditOpen(true);
  };

  return (
    <>
      <Button type="link" onClick={onEdit}>
        编辑
      </Button>
      <EditModal isModalOpen={editOpen} setIsModalOpen={setEditOpen} />
    </>
  );
}

// index.tsx - 父组件中使用
<Column
  title="操作"
  dataIndex="action"
  key="action"
  render={(_: any, record: any) => {
    return <EditButton data={record} />; // ✅ 正常工作
  }}
/>

错误实现（导致黑屏）：

// index.tsx - 直接在 render 回调中使用 Hook
<Column
  title="操作"
  dataIndex="action"
  key="action"
  render={(_: any, record: any) => {
    // ❌ 错误：在回调函数中使用 Hook
    const [editOpen, setEditOpen] = useState(false);

    const onEdit = () => {
      setEditOpen(true);
    };

    return (
      <>
        <Button type="link" onClick={onEdit}>
          编辑
        </Button>
        <EditModal isModalOpen={editOpen} setIsModalOpen={setEditOpen} />
      </>
    );
  }}
/>

🔍 问题原因分析

根本原因

违反了 React Hooks 的使用规则：Hooks 只能在 React 函数组件的顶层调用，不能在普通函数、回调函数、循环或条件语句中调用。

技术细节

1. render 回调的本质

   • Table.Column 的 render 属性接收的是一个普通函数，不是 React 组件函数
   • 这个函数在每次渲染时被调用，用于生成每一行的渲染内容
   • React 无法在这个函数执行上下文中追踪 Hook 的调用顺序

2. React Hooks 的工作原理

   • Hooks 依赖于 React 的内部机制来维护状态和副作用
   • React 通过调用顺序来识别和管理每个 Hook
   • 当 Hook 在非组件函数中调用时，React 无法正确建立 Hook 的调用链，导致运行时错误

3. 错误表现

   • 开发环境：控制台报错 Invalid hook call. Hooks can only be called inside the body of a function component.
   • 页面表现：白屏/黑屏（React 错误边界捕获错误，导致整个组件树崩溃）

错误信息示例

Error: Invalid hook call. Hooks can only be called inside the body of a function component.
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

✅ 解决方案

方案一：保持子组件独立（推荐）

优点：

• 符合 React 组件化设计原则
• 每行数据拥有独立的状态管理
• 代码清晰，易于维护和测试
• 性能优化：可以单独对子组件进行 memo 优化

实现：

// editButton.tsx
export default function EditButton({ data }) {
  const [editOpen, setEditOpen] = useState(false);
  // ... 其他逻辑
  return (/* ... */);
}

// index.tsx
<Column
  title="操作"
  render={(_: any, record: any) => {
    return <EditButton data={record} />; // ✅ 正确
  }}
/>

方案二：在父组件顶层管理状态

如果需要在父组件层面统一管理弹窗状态（例如：同一时间只允许打开一个弹窗），可以在父组件顶层使用 Hook：

// index.tsx
export function PolicyTextConfig() {
  // ✅ 在组件顶层声明状态
  const [editingRecord, setEditingRecord] = useState<any>(null);
  const [editOpen, setEditOpen] = useState(false);

  const handleEdit = (record: any) => {
    setEditingRecord(record);
    setEditOpen(true);
  };

  return (
    <>
      <Table dataSource={tableData}>
        <Column
          title="操作"
          render={(_: any, record: any) => {
            // ✅ render 回调中只调用普通函数，不使用 Hook
            return (
              <Button type="link" onClick={() => handleEdit(record)}>
                编辑
              </Button>
            );
          }}
        />
      </Table>

      {/* ✅ 弹窗放在组件顶层 */}
      <EditModal
        isModalOpen={editOpen}
        setIsModalOpen={setEditOpen}
        data={editingRecord}
      />
    </>
  );
}

📚 知识点总结

React Hooks 规则

1. 只在顶层调用 Hook

   • ✅ 在函数组件的最顶层
   • ✅ 在自定义 Hook 的最顶层
   • ❌ 不在循环、条件或嵌套函数中
   • ❌ 不在普通回调函数中

2. 只在 React 函数中调用 Hook

   • ✅ React 函数组件
   • ✅ 自定义 Hook
   • ❌ 普通 JavaScript 函数
   • ❌ 事件处理函数
   • ❌ 渲染回调函数（如 render、map 回调等）

常见陷阱场景

场景	是否正确	说明
组件顶层 useState	✅	正确用法
自定义 Hook 中 useState	✅	正确用法
map 回调中 useState	❌	错误：普通函数
onClick 中 useState	❌	错误：事件处理函数
Table.Column render 中 useState	❌	错误：渲染回调函数
条件语句中 useState	❌	错误：违反调用顺序规则

🎯 最佳实践

1. 组件化优先

   • 需要状态管理的 UI 片段，优先提取为独立组件
   • 保持组件的单一职责原则

2. 状态提升 vs 状态下沉

   • 如果多个组件需要共享状态 → 状态提升到父组件
   • 如果状态只属于单个组件 → 保持在组件内部

3. 代码审查检查点

   • 检查所有 Hook 调用是否在组件顶层
   • 检查是否有在回调函数中使用 Hook 的情况
   • 使用 ESLint 插件 eslint-plugin-react-hooks 自动检测

🔧 调试技巧

1. 查看控制台错误

   • React 开发模式会给出明确的错误提示
   • 关注 "Invalid hook call" 相关错误

2. 使用 React DevTools

   • 检查组件树结构
   • 查看 Hook 调用情况

3. ESLint 配置

   {
     "plugins": ["react-hooks"],
     "rules": {
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn"
     }
   }
   

📝 总结

这次踩坑的核心教训是：React Hooks 有严格的调用规则，任何违反规则的使用都会导致运行时错误。 在 Ant Design Table 的 render 回调中，应该只返回 JSX 或调用普通函数，而将需要 Hook 的逻辑封装在独立的组件中。

通过这次问题，我们更加理解了：

• React Hooks 的设计原理和限制
• 组件化设计的重要性
• 代码重构时需要保持对 Hook 规则的敏感性

---