React在事件处理函数中调用含useState的函数报无效Hook错误如何解决

问题根本原因 #

• 你定义的GetAssetTypeNameFunction内部使用了useState Hook，它属于React函数组件/自定义Hook，不能在类组件的事件处理函数中直接调用，违反了React Hook只能在函数组件顶层、自定义Hook顶层调用的规则，这就是报错的直接原因。
• 额外的逻辑问题：该函数的返回值是JSX元素（<ul>节点），而非你需要的字符串类型的assettype，即使不报错，也无法拿来和"Tower"做等值判断；且函数内部的接口请求是异步逻辑，你同步调用也无法即时拿到返回结果。

解决方案（改动最小，适配你当前类组件的写法） #

直接删除GetAssetTypeNameFunction，把接口请求逻辑写到editAssets事件处理函数中，异步拿到结果后再做路由判断：

// 首先在ListAssetsComponent顶部引入AssetTypeService
import AssetTypeService from '../Services/AssetTypeService'

// 改写editAssets方法为异步方法
async editAssets(assetsid,assettype_assettypeId){
  try {
    const res = await AssetTypeService.getAssetTypeById(assettype_assettypeId)
    const assetTypeList = res.data
    // 按你的逻辑取数组中对应资产类型名称，示例取第一个元素的assettypeName，可根据实际业务调整
    if(assetTypeList?.[0]?.assettypeName === "Tower"){
      this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`)
    }
  } catch (err) {
    console.error('获取资产类型失败', err)
  }
}

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