错误：无效的挂钩调用。伙计们请帮帮我答案

【问题标题】：Error: Invalid hook call. guys please helpme错误：无效的挂钩调用。伙计们请帮帮我
【发布时间】：2021-02-18 06:37:20
【问题描述】：

import React, { useState ,useEffect} from 'react'
import "./Chat.css"
import { Avatar ,  IconButton } from '@material-ui/core'
import MoreVertIcon from '@material-ui/icons/MoreVert';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import AttachFileIcon from '@material-ui/icons/AttachFile';
import EmojiEmotionsOutlinedIcon from '@material-ui/icons/EmojiEmotionsOutlined';
import MicIcon from '@material-ui/icons/Mic';
import { useParams } from "react-router-dom";
import db from './firebase';
function Chat(props) {
    const [input, setInput] = useState('')
    const [seed, setSeed] = useState('');
    const { roomId } = useParams();
    const [roomName, setRoomName] =useState("")
    useEffect(() => {
      if(roomId) {
        db.collection('rooms').doc(roomId)
        .onSnapshot(snapshot =>(
          setRoomName(snapshot.data().name)
        ))  
      }
    }, [roomId] )
    
    useEffect(() => {
        setSeed(Math.floor(Math.random() * 5000));
      }, [])

    const sendMessage = (event) => {
      event.preventDefault()
      setInput("");
    }
    return <div className="chat"> 

      <div className="chat__header">
      <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
      <div className="chat__headerInfo">
      <h3>{roomName}</h3>
      <p> last message....</p>
      </div>

      <div className="chat__headerRight">
      <IconButton> 
      <SearchOutlinedIcon />
      </IconButton>
      <IconButton>
         <AttachFileIcon/>
         </IconButton>
      <IconButton>
      <MoreVertIcon/>
      </IconButton>
      </div>
      </div>

      <div className="chat__body">
      <p className={`chat__message ${true &&
      "chat__reciever"}`}>
      <span className="chat__name">Ashu</span>
      Hey guys
      <span className ="chat__timestamp">2:52pm;
      </span>
      </p>
      </div>

      
      <div className="chat__footer">
      <EmojiEmotionsOutlinedIcon/>
      <form>
      <input value={input} 
      onChange={(event) => setInput(event.target.value)}
      placeholder="Type a message..."
      type="text" />
      <button onClick="{sendMessage}" type="submit">Send a message</button>
      </form>
      <MicIcon/>
      </div>
    </div>
        
}

export default Chat

请帮忙！！！！！！每当我尝试使用 {useparams} 我失败并显示错误：错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用程序中拥有多个 React 副本有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

请帮助我如何调试它

【问题讨论】：

您是否尝试检查React 和React DOM 的版本是否匹配？或者该函数是从React内部调用的？
您使用的是什么版本的 react、reactDOM 和 react-router-dom？我有点惊讶的是，如果您对 react/reactDom 有任何问题，您不会在上面的 2 行中看到此错误，useState 似乎没有被标记为无效钩子称呼。此组件是否在 Router 上下文中呈现？
不是一个常规的 react 开发者，但你不认为 return 应该将 jsx 包裹在 () 括号内吗？

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

我不认为你违反了钩子规则检查你是否有不匹配的 React 和 React DOM 版本，或者你在同一个应用程序中有多个 react 副本

【讨论】：

问题是无效的钩子调用，没有违反 React 钩子的规则。

【解决方案2】：

似乎缺少依赖反应路由器。你加了吗？请查看您的 package.json 文件。如果缺少 react-router 则需要添加此包。

【讨论】：

react-router，问题是关于 hooks 未被识别