React报错：Rendered more hooks than during the previous render 问题排查与解决求助

Let's break down what's causing this error and how to fix it step by step.

First, that error almost always means React's Hook rules are being violated—specifically, the rule that Hooks must be called in the exact same order every time your component renders. Let's look at your code and address the issues:

1. Fix Hook Call Order (Critical) #

Looking at your component, you've defined dataSource before calling your Hooks. While this might seem harmless, moving Hooks to the absolute top of your component eliminates any risk of order-related issues. Additionally, there's no need to define dataSource as a separate variable—you can pass the initial data directly to useState:

export default function ClassTheoryDataTable() { 
  // Move Hooks to the very top of the component
  const history = useHistory(); 
  const [tableData, setTableData] = useState([ 
    { key: '1', date: '18.03.2021', subject: 'Revision', inst: 'HASHEL', edit: 'edit', delete: 'delete' } 
  ]); 

  // Rest of your component logic...
}

Using const instead of let for history is also a best practice since it won't be reassigned.

2. Fix the Delete Button's Condition Logic #

Your delete button uses dataSource.length >= 1 to conditionally render, but dataSource is a static initial array that never updates. This means even when you delete all rows, the delete button will still try to render (since dataSource always has one item). This inconsistency can cause unexpected re-renders that trigger Hook order issues. Replace dataSource with your state variable tableData:

{ 
  title: '', 
  dataIndex: 'delete', 
  key: 'delete', 
  width: '50px', 
  render: (text, record) => ( 
    // Use tableData to check the current number of rows in the table
    tableData.length > 0 ? 
    <Popconfirm title="Sure to delete ?" onConfirm={() => handleDelete(record.key)}> 
      <CloseCircleFilled style={{ color: 'red', fontSize: '15px' }} /> 
    </Popconfirm> : null 
  ) 
}

3. Verify Router Context #

Since you're using useHistory, make sure your ClassTheoryDataTable component is wrapped inside a React Router <BrowserRouter> (or similar) component. If it's not, useHistory will throw an error that can cascade into unexpected Hook behavior. Your app's root component should look something like this:

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Your ClassTheoryDataTable component lives somewhere inside here */}
    </BrowserRouter>
  );
}

4. Double-Check Dependencies #

Ensure you're using compatible versions of React and React Router:

• React 16.8+ is required for Hooks to work
• React Router v5 uses useHistory (if you're on v6, you'll need to switch to useNavigate instead)

After making these changes, the Hook order will stay consistent across renders, and the delete logic will correctly reflect your table's current state, resolving the error.

内容的提问来源于stack exchange，提问作者Dhanushka S. Jayasinghe