Collection of common errors in react

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

Screenshot below:

Error Prompt: The inherited value of the class is undefined, not a constructor

The code is as follows: if Component is written as a lowercase component, the following error will appear; or if the word Component is incorrectly written, the following prompt will appear

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

Introduce the TabBar component in antd-mobile into the React project, and use the a tag in the form as follows

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

Prompt the above error: probably means that the a tag needs to provide the href attribute

Solution to the above error: Run npm run reject to expose the configuration, and then set jsx-a11y/anchor-is-valid to false in the eslintConfig property in package.json

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

3. Use scaffolding create-react-app to create a react project and refer to problems with local pictures

Configure the path src alias in the project as @

Introduce picture writing 1:

The browser console reports 304, check the path, @ is not replaced with the configured value src

Introduce picture writing 2:

The browser reports 304: Path resolution is incorrect

Introduce picture writing 3:

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

The browser has no problem parsing the address, but it still reports 304

Solution: Use ES6 import syntax

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
  }
]

It is also said on the Internet that there is a scheme as follows:

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

However, the browser still reports the same error as "Imported Picture Writing 2". If there are colleagues who know the reason for reporting this error, I hope not to let us know.

4. Using the component Carousel in antd-mobile, when the picture slides, the browser console reports the following error

There are two solutions on the Internet

1) Add global style

* { touch-action: pan-y; }

2) The automatic rotation of the carousel picture is contrary to the browser’s blocking default event. You can find the corresponding file comment to block the default practice. This method is a bit problematic, because the component library is used, and the local library is changed and it is not difficult to submit it.

None of the above solutions solve the problem, and colleagues who know the answer hope not to enlighten me.

5. When using Carouse in antd-mobile, the following two problems occur:

1) The autoplay attribute is added, but the carousel will not play automatically

2) Jump from the carousel page to page b. When returning to the carousel page, the height is incorrect

Reason : The carousel data is dynamically loaded, and the amount of data before and after loading is not the same

Solution :

1) The state adds the variable hasLoaded which indicates that the interface for obtaining the data of the carousel successfully returned the data.

2) Set hasLoaded to true after the interface returns data

3) When hasGetSwiperData is true, the carousel diagram component is rendered

There is also a small problem: when loading the carousel, there will be a gradual process of height from small to large; this is because the height of the parent container of the carousel is not added, which makes it impossible to expand the height.

You can set a fixed height value for the parent container

   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. Click "Full Rent" in the navigation menu on the homepage to jump to the search room list page. The "Search room" item of TabBar is not highlighted

Reason: When implementing the function, only the click and the first loading of the Home component were considered, and the routing switch when the Home component was not reloaded was not considered

Solution: When the route is switched, the code of the route highlight is also executed: judge whether the route is switched in componentDidUpdate (route information is passed through props, you can compare the two props.location.pathname before and after the update), after the route address is switched To highlight the tab item

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

Collection of common errors in react

Guess you like