React使用axios的坑:每次都要请求两次,而且前后端相同配置

React使用axios的坑:每次都要请求两次,而且前后端相同配置

项目:react-antd-axios

接口会调用两次,但是页面中并没有写调用两次的方法,componentDidMount中值调用了一次,反复查看没有问题,axios中封装的api也没有出现问题。

我的项目解决: 在包裹着content的路由页面,也就是主页面中componentDidMount写了方法,但是并没有调用api

componentDidMount() {
    this.getPath();
  }
  getPath() {
    // 获取当前路径
    const pathname = this.props.location.pathname;
    //获取当前所在的目录层级
    const rank = pathname.split("/");
    //rank = ["","policy-engine","nas-client"]
    console.log(rank);
    switch (rank.length) {
      case 2: //一级目录
        this.setState({
          selectedKeys: [pathname]
        });
        break;
      case 3: //二级目录,要展开一个subMenu
        this.setState({
          selectedKeys: [pathname],
          openKeys: [rank.slice(0, 2).join("/")]
        });
        break;
      case 4: //三级目录,要展开两个subMenu
        this.setState({
          selectedKeys: [pathname],
          openKeys: [rank.slice(0, 2).join("/"), rank.slice(0, 3).join("/")]
        });
        break;
    }
  }

主要是 componentDidMount() {

this.getPath();

}这一部分写了调用函数

解决方法

componentWillMount() {
    this.getPath();
  }

写在componentWillMount就能解决。

注意:这个只是我的项目问题,仅供参考;其他问题看查看

axios调用两次接口

原文链接:segmentfault.com

上一篇:使用vue二次封装elementui中upload组件
下一篇:懒加载与预加载--web图片优化

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    10 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 首次实战小程序遇到的坑

    在我的强烈要求下,产品终于决定开发一款小程序了,以下是一些开发心得 1.在正式进入开发前,花了两个多小时的时间,阅读了开发文档,不得不说,在此大赞腾讯的开发文档,简单明了 2.拿到设计图,是一倍的...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    7 个月前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    5 个月前

官方社区

扫码加入 JavaScript 社区