× 错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。[ReactJS]

Posted 2023-03-10

【中文标题】× 错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。[ReactJS]

【英文标题】：× Error: Invalid hook call. Hooks can only be called inside of the body of a function component.[ReactJS]

【发布时间】：2021-10-25 05:34:53

【问题描述】：

我正在尝试使用 ReactJS 构建应用程序，但收到此“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。这可能由于以下原因之一发生：

您的 React 和渲染器版本可能不匹配（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用中拥有多个 React 副本”

我尝试了 Google 的许多方法，但仍然无法正常工作，但仍然出现此错误。 请帮帮我！

代码

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

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


export default ProductDetails

App.js

import './App.css';
import 
  BrowserRouter,
  Switch,
  Route,
  Link
 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" component=()=> <CartDetails val=text /> />
          <Route exact path="/products-details/:id" component=ProductDetails />
          <Route
            exact
            path="/products-details/:id"
            component=() => <ProductDetails setText=setText />
          />
          
        </Switch>
      </BrowserRouter>

    </>
  );

export default App;

package.json

  "peerDependencies": 
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
 ,

 "react-dom": "^17.0.2",

【问题讨论】：

你如何使用App？

想使用useParams() 获取url参数ID。但不工作..请帮助我

没有。重新阅读我的问题。你如何使用App？你可能在做ReactDOM.render(App, ...) 这是错误的，你需要做ReactDOM.render(<App />, ...)

【参考方案1】：

您应该在ProductDetails() 组件中放置一个名为props 的参数，然后只有您可以从父组件访问道具。 像这样放

function ProductDetails(props) 
   const  setText  = props;
   ....

现在您可以在ProductDetails 组件中使用setText 函数。

【讨论】：

先生，我不想要它..我想使用 useParams() 来获取 url 参数 ID。但就我而言，它不起作用