react中常见错误收集

￡神魔★判官ぃ 2022-11-06 08:55 248阅读 0赞

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

截图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1][]

**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别名为@

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 2][]

引进图片写法1：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 4][]

引进图片写法2:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 6][]

引进图片写法3:

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 7][]

解决方法：使用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
      }
    ]

网上还说有种方案如下：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 8][]

看了网上的解法有两种

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的“找房”项没有高亮**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 9][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 10][]

原因：实现功能时候，只考虑了点击与及第一次加载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
          })
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70]: /images/20221023/b9cbc29ecf1243ddbe99555773f457e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20221023/36afa6d21ab848efab2ddb9d297b9370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20221023/d7a80a394b2445f6a755c8505c74d0fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20221023/dad4504552484b26b5b5cdaf4937b688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 4]: /images/20221023/e53e872f4ef84a01b99d0e1f9a4d3aa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 5]: /images/20221023/98c24c97c3da4ec197c9445bd1078afa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 6]: /images/20221023/28e2df40bef446429b33540242c79ca7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 7]: /images/20221023/126068dce34d43fdaa3241361753bfe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 8]: /images/20221023/efbecad826e94f3db671dc25c77d14f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210314144928565.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70 10]: /images/20221023/7648febbe0974f2fbabbc19958568980.png