使用Material UI TextField触发Invalid Hook call错误如何解决

问题原因 #

• 最常见的诱因是你使用的@material-ui/core（Material UI v4）版本与本地React 17的版本不匹配，或者@material-ui/core的依赖目录下存在独立安装的另一版本React，导致Hook调用时触发了多副本校验规则。
• 少部分情况是项目构建配置存在问题，导致MUI组件的运行上下文和你的业务组件不在同一个React实例下。

修复步骤 #

1. 先删除现有依赖并重新安装匹配版本的MUI

# 卸载旧的MUI依赖
npm uninstall @material-ui/core
# 安装适配React 17的MUI v4最终稳定版
npm install @material-ui/core@4.12.4

2. 检查是否存在多React副本，执行以下命令查看所有React安装实例：

npm ls react

如果输出结果中出现多个不同版本的React条目，执行强制依赖对齐：

npm dedupe react react-dom

3. 清理构建缓存后重启项目

# 若使用create-react-app构建
rm -rf node_modules/.cache
npm start

验证方法 #

修改你的Login组件写入测试代码，确认组件运行上下文正常：

import { useState } from 'react'
import './Login.css';
import TextField  from "@material-ui/core/TextField";

const Login = () => {
    // 测试本地Hook是否正常运行
    const [val, setVal] = useState('')
    return(
        <div className="login">
            <div className="loginContainer">
               <TextField value={val} onChange={(e) => setVal(e.target.value)} />
            </div>
        </div>
    );
}

export default Login;

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