react中常见错误收集

1、错误：index.js:3 Uncaught TypeError: Class extends value undefined is not a constructor or null

截图如下：

错误提示：类继承的值为undefined，不是一个构造器

代码如下：将Component写成小写的component，就会出现下面的错误；或者将Component单词写错也会出现下面的提示

2、错误：The href attribute is required for an anchor to be keyboard accessible

在React项目中引入antd-mobile中的TabBar组件，使用a标签形式如下

        <a style={
   
   { display: 'block', marginBottom: 600, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              fullScreen: !this.state.fullScreen,
            });
          }}
        >
          Click to switch fullscreen
        </a>

提示上面的错误：大概意思是a标签需要提供href属性

解决上面错误方法：运行npm run reject，将配置暴露出来，然后在package.json中的eslintConfig属性，将jsx-a11y/anchor-is-valid设为false

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules":{
      "jsx-a11y/anchor-is-valid":"off"
    }
  },

3、使用脚手架create-react-app创建react项目，引用本地图片出现的问题

在项目中配置路径src别名为@

引进图片写法1：

浏览器控制台报304，查看路径，@没有被替换成配置的值src

引进图片写法2:

浏览器报304：路径解析不对

引进图片写法3:

  {
    url: 'src/assets/img/home/index1.jpg',
    id: 1
  }

浏览器解析地址没有问题，但是还是报304

解决方法：使用ES6的import语法

import img1 from '@/assets/img/home/index1.jpg'
import img2 from '@/assets/img/home/index2.jpg'
import img3 from '@/assets/img/home/index3.jpeg'

// mock
const swipersData = [
  {
    url: img1,
    id: 1
  },
  {
    url: img2,
    id: 2
  },
  {
    url: img3,
    id: 3
  }
]

网上还说有种方案如下：

        <img
          src={require('@/assets/img/home/index1.jpg')}
          alt=""
          style={
   
   { width: '100%', verticalAlign: 'top' }}
        />

但是浏览器还是报同“引进图片写法2”一样的错误，如果有知道报这种错误的原因的同仁，希望不令赐教

4、使用antd-mobile中的组件Carousel，当图片滑动的时候，浏览器控制台报如下错误

看了网上的解法有两种

1）添加全局样式

* { touch-action: pan-y; }

2）轮播图的自动轮播与浏览器的阻止默认事件相悖，可找到相应文件注释阻止默认实践，这种方法有点问题，因为使用的是组件库，本地库改了并不难提交上去

以上解法都没有解决改问题，有知道答案的同仁希望不令赐教哈

5、使用antd-mobile里面的Carouse时候，出现下面两个问题：

1）添加了autoplay属性，但是轮播图不会自动播放

2）从轮播图页面跳到b页面，在返回轮播图页面，高度不对

原因：轮播图数据是动态加载的，加载完成前后数据数量不一样

解决方法：

1）state添加表示获取轮播图数据接口成功返回了数据的变量hasLoaded

2）当接口返回数据之后将hasLoaded设为true

3）当hasGetSwiperData为true的时候，在渲染轮播图组件

还有个小问题：就是在加载轮播图的时候，会出现一个高度由小到大的渐变过程；这是因为没有给轮播图父容器添加高度，导致无法撑开高度

可以给父容器设置一个固定高度值

   this.state = {
      // 轮播图状态数据
      swipers: [],
      hasLoaded: false
    }


  // 获取轮播图数据的方法
  getSwipers() {
    // const res = await axios.get('http://localhost:8080/home/swiper')
    setTimeout(() => {
      this.setState({
        swipers: [...swipersData],
        hasLoaded: true
      })
    }, 1000)
  }


// 渲染
<div className="swiper">
  {
    this.state.hasLoaded ? (
      <Carousel
        infinite
        autoplay
        afterChange={index => console.log('slide to', index)}
      >
        {this.renderSwipers()}
      </Carousel>
    ) : ('')
  }
</div>

   // swiper容器添加默认高度
  .swiper{
    background-color: rgb(167, 166, 166);
    height: 212px;;
  }

6、点击首页导航菜单的“整租”，跳转到找房列表页面，TabBar的“找房”项没有高亮

原因：实现功能时候，只考虑了点击与及第一次加载Home组件情况，没考虑不重新加载Home组件时的路由切换

解决方法：在路由切换时，也执行路由高亮的代码：在componentDidUpdate中判断路由是否切换(路由信息通过props传递，可以通过比较更新前后的两个props.location.pathname)，在路由地址切换后，让tab项高亮

  componentDidUpdate(preProps) {
    if (preProps.location.pathname !== this.props.location.pathname) {
      // 更新
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

react中常见错误收集

猜你喜欢