升级React 18、MUI v5和Redux v5后应用无法渲染问题求助

AI 小北

2026-6-25

解决方案：React 18升级后Invalid Hook Call问题处理

核心原因

项目中同时存在React 17.0.2和React 18的依赖，导致React上下文（Context）实例不统一，触发useContext读取null的错误，这是引发Invalid Hook Call的典型场景。

分步修复步骤

彻底清理重复依赖
1. 删除项目的node_modules文件夹和锁文件（package-lock.json或yarn.lock）
2. 在package.json中明确指定React和React-DOM的18.x版本，示例：
```
"react": "^18.2.0",
"react-dom": "^18.2.0"
```
3. 重新安装依赖：npm install或yarn install
4. 再次运行npm ls react和npm ls react-dom，确认只有React 18版本存在，无17.x残留
排查第三方依赖兼容性
1. 逐个检查依赖包是否支持React 18，可通过npm view [package-name] peerDependencies查看每个包的peer依赖要求
2. 对不兼容的包，要么升级到支持React 18的版本，要么替换为兼容方案（比如之前卸载的mui-datatables，可以换成MUI官方的@mui/x-data-grid，完全适配MUI v5和React 18）

修复React 18入口文件配置
把旧的ReactDOM.render替换为React 18的新渲染API，示例index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

注：之前移除的StrictMode，在依赖修复后可以重新添加，它能提前发现潜在问题。

核对Redux v5配置
确保使用Redux Toolkit的configureStore创建store（替代旧的createStore），示例：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

export default store;