记录react的一次报错:useParams要在React函数组件中使用

262 阅读1分钟

代码:

import { useNavigate,useParams } from 'react-router-dom';
// 组件函数
const HospitalSchedul = () => {
  const navigate = useNavigate()
  // 科室数据
  const [dep,SetDep] = useState<DepList>([])

  // 获取科室回调
  const getDepList = async()=>{
    // 返回当前匹配路由的路由参数
    const {hoscode} = useParams()
    const res = await reqGetDepList(hoscode as string)
    SetDep(res)
  }
  useEffect(()=>{
    getDepList()
  },[])

错误: image.png

意思是:在函数“getDepList”中调用React Hook“useParams”,该函数既不是React函数组件,也不是自定义React Hoop函数。React组件名称必须以大写字母开头。React Hook名称必须以单词“use”开头React hooks/hooks规则;大概意思是使用useParams要在React函数组件中使用,而getDepList不是组件函数

解决:在组件函数就调用useParams()获取路由参数

// 组件函数
const HospitalSchedul = () => {
  const navigate = useNavigate()
  // 返回当前匹配路由的路由参数
  const {hoscode} = useParams()

  // 科室数据
  const [dep,SetDep] = useState<DepList>([])

  // 获取科室回调
  const getDepList = async()=>{
    const res = await reqGetDepList(hoscode as string)
    SetDep(res)
  }
  useEffect(()=>{
    getDepList()
  },[])
}