ReactJS出现Invalid hook call无效Hook调用报错如何解决

错误根源排查 #

你的报错主要由以下几个代码问题触发：

• 同一路由/products-details/:id重复定义，Switch组件只会匹配第一个命中的路由规则，你写的第二个带自定义参数的路由不会生效
• 路由传参写法错误：react-router v5中使用component属性接收内联函数返回组件，会导致每次路由渲染时重新创建组件实例，破坏Hook调用的上下文环境
• ProductDetails组件未声明props入参，若启用注释的setText取值逻辑会触发变量未定义错误
• package.json仅声明了react-dom版本，未明确指定react版本，可能存在版本不匹配问题

修复步骤 #

1. 修正App.js路由配置 #

删除重复路由，将需要传自定义参数的路由从component属性改为render属性，同时把路由内置参数（如match、history等）透传给组件：

import './App.css';
import {
  BrowserRouter,
  Switch,
  Route,
} from "react-router-dom";
import Header from './Components/Header';
import Homepage from './Components/HomePage';
import CartDetails from './Components/CartDetails';
import ProductDetails from './Components/ProductDetails';
import Error404 from './Components/Error404';
import { useState } from 'react';

function App() {
  const [text, setText] = useState(0);
 
  return (
    <>
      <BrowserRouter>
        <Header text={text}/>
        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/cart-details" render={()=> <CartDetails val={text} />} />
          <Route
            exact
            path="/products-details/:id"
            render={(routeProps) => <ProductDetails {...routeProps} setText={setText} />}
          />
          <Route component={Error404} />
        </Switch>
      </BrowserRouter>
    </>
  );
}
export default App;

2. 补全ProductDetails组件入参 #

import React from 'react'
import { useHistory, useParams } from 'react-router-dom'

function ProductDetails(props) {
  const { id } = useParams()
  const { setText } = props;
  console.log(id)
  
  return (
    <div>
      <h1>{id}</h1>
    </div>
  )
}

export default ProductDetails

3. 统一React相关依赖版本 #

在package.json的dependencies中明确添加和react-dom版本匹配的react依赖，避免版本不兼容：

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^5.3.4"
},
"peerDependencies": {
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
}

4. 排查多React副本问题 #

执行npm ls react命令检查项目中是否安装了多个版本的React，若存在多个版本，统一版本后重新安装依赖即可。

内容的提问来源于stack exchange，提问作者Keerthan Achar