Ken428965 2022-11-17 00:54 采纳率: 54.3%
浏览 2
已结题

react,将class组件的代码改成函数组件的代码后报错?

在使用的react版本如下:

img


在使用class组件时,期间用到this.props.history.push这段代码,chrome浏览器报错:

img


部分代码如下:

renderHousesList() {
    return this.state.housesList.map(item => (
      <HouseItem
        onClick={() => this.props.history.push(`/detail/${item.houseCode}`)}
        // onClick={() => <Link to={"/detail/" + item.houseCode} />}
        key={item.houseCode}
        src={BASE_URL + item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price}
      />
    ))
  }

为解决此问题,在网上搜索了一些方法,例如:
1、把this.props.history.push改成Link to(如上注释掉的代码所示),点击后浏览器没有报错也没有反应(故此方法无效);
2、使用withRouter(withRouter已在es6里被移除了,故此方法可行性不高);
3、在父组件里传值写一段代码,如history={this.props.history},然后在子组件里等于一个history.push(this.props.history.push所在的组件的父组件为node_modules里的组件Route.Provider,不希望修改其代码以免造成其他难处理的问题,故此方法也可行性不高);
4、把class组件里的所有代码改成函数组件的代码,然后使用hook,将this.props.history.push改成navigate(本class组件里的的代码有几百行,虽然修改成函数组件的代码不会太费事,但修改后陆续报各种各样的错误,如百度地图的getZoom方法未定义等等,故此方法可行性也不高)。

img

请问还有什么简便的方法可以解决this.props.history.push报错的问题?

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-11-17 08:46
    关注

    https://blog.csdn.net/qq_36493878/article/details/123015664

    react -router v6 类组件 不支持 路由写法 。想用 就得自己封装一个 高阶 组件 withRouter .上面的文章里 有代码和使用方法

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月17日
  • 已采纳回答 11月17日
  • 创建了问题 11月17日

悬赏问题

  • ¥15 请专家看看这个问题出在哪里?
  • ¥15 tensorrt 推理 yolov8框出现错误
  • ¥15 用hc 05,做蓝牙控制小车 小车只能说初始遥控方向影响,后续不能更改
  • ¥15 51单片机怎么把每次输入键值保存到数组作为我的确认键的判断条件呢
  • ¥15 c语言字符串单词入门问题报错
  • ¥30 我现在是双非人工智能专业不知道要不要转到软件工程专业
  • ¥15 请问12脉波整流机组的外特性曲线具体是如何推导
  • ¥15 abaqus里的python算法
  • ¥100 如何在思科模拟器中进入CEF模式
  • ¥15 Simulink 仿真如何使用MATLAB function模块获取到仿真过程中某一仿真时刻输入到模块的函数的值?