Question

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} 我失败并显示错误：错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

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

请帮我如何调试

Answer 1

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

Answer 2

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

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

2 个答案: