react踩坑

简介: react踩坑

文章目录

1. 默认路由在V5被废除

1.1. Attempted import error: 'IndexRoute' is not exported from 'react-router-dom'.

ps:在react-routerV5 已经废除掉了默认路由

如图,在react-router的官方文档里面已经找不到IndexRoute的API的。

1.2. tiny-warning.esm.js:11 Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored

  • ⚠警告的路由组件写法
  • 问题分析

开始的时候,想要使用默认路由,后来发现被废弃了,直接从IndexRoute改成了Route,忘记调整顺序。

  • 解决办法
import {  Route, Switch } from 'react-router';
import App from '../views/App/App'
import Login from '../views/Login/Login'
import { BrowserRouter } from 'react-router-dom';
function Routes() {
  return (
    <BrowserRouter >
    <Switch>
        <Route path='/' component={App} />
        <Route path='/Login' component={Login} />
    </Switch>
    </BrowserRouter>
  );
}
export default Routes;

2、组件问题

2.1. `Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

at routes`

组件的首字母应该大写,不然识别不了

2.2. Warning: Login(...): Norendermethod found on the returned component instance: you may have forgotten to definerender.

  • 报错代码
import React from 'react';
import { withRouter } from 'react-router';
class Login extends React.Component{
    render(){
        return (
            <div className="login">
                登录
            </div>
        )
    }
}
export default withRouter(Login)

2.3 `The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

  • 直接去掉<text></text>文本直接暴露,问题解决,效果一致

3. 构造器问题

3.1 `src\views\Login\Login.jsx

Line 5:5: Useless constructor no-useless-constructor `

  • 解决办法:加return


3.2. 不要使用没有调用的constructor

  • 错误代码,还是上面的登录代码(听者伤心闻者流泪)
  • 解决办法: 把constructor注释掉

  • 结果

3.3 . tiny-warning.esm.js:11 Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored


4. 类型检查

4.1. Typo in declared prop type: Boolean react/no-typos

> 从 React v15.5 开始 , React.PropTypes  助手函数已被弃用,建议使用  prop-types 库  来定义 contextTypes 。

博客参考

5.生命周期问题

5.1 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内部反复调用setState时,就会发生这种情况。

React限制嵌套更新的数量,以防止无限循环。

5.2 rendershouldComponentUpdate调用一次被执行两次

import {
    Component
} from 'react';
const { log } = console
export default class lifeCircle extends Component{
    componentDidMount(){
        log('componentDidMount---')
    }
    componentDidUpdate(){
        log('componentDidUpdate---')
    }
    shouldComponentUpdate(){
        log('shouldComponentUpdate---')
        return true
    }
    state = {
        count : 0
    }
    change = ()=>{
        this.setState({
            count : this.state.count + 1
        })
    }
    render(){
        log('render-----')
        return (
            <div>
                <h1>生命周期变化{this.state.count}</h1>
                <button onClick={this.change}>加1</button>
            </div>
        )
    }
}
  • 运行结果

  • 可以看到render以及shouldComponentUpdate每次都执行了两次
  • 解决办法
    经多方查阅,发现是react严格模式造成的问题.

  • 去掉index.js里面的React.StrictMode去掉即可(不建议这么做,严格模式可以自动帮你检查部分错误)
    – 修改前

    –修改后


–结果

6. 感言

之前简单学习了一下`react`,然后没有业务需要,一直没用,今天回来一用,频繁踩坑.。学习了还是得应用呀,互联网的脚步,稍微落后一步,就出大麻烦,呜呜


相关文章
|
6月前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
158 3
|
23天前
|
存储 前端开发 JavaScript
React快速进阶
React快速进阶
11 1
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
49 2
|
6月前
|
缓存 监控 前端开发
这个知识点,是React的命脉
这个知识点,是React的命脉
|
6月前
|
XML 存储 前端开发
react部分知识点总结
react部分知识点总结
58 0
|
前端开发 JavaScript vr&ar
【React 入门系列 01】React 入门 & 环境搭建
React是一个用于构建用户界面的JavaScript库。React是基于声明式、组件化开发方式。什么是声明式?通过使用JavaScript代码来描述UI(HTML页面)展示是什么样的,就和写HTML本质上是一样的。由React来负责UI的渲染,并在数据变化时更新UI。 React基于组件化方式进行开发。把构建页面的一部内容进行封装,在相似甚至相同的场景下进行复用,通过这样的方式进行代码的复用以及页面的构建。 React支持多端开发的场景。使用React可以开发Web端,基于React-Native可以实现移动端场景开发。使用React(React 360)开发VR应用。
|
设计模式 存储 缓存
|
XML 前端开发 JavaScript
react常用知识点1
react常用知识点1
47 0
|
前端开发
react常用知识点2
react常用知识点2
54 0
|
前端开发
react 使用 useEffect 及踩坑
react 使用 useEffect 及踩坑全记录
150 1