React函数式组件项目小羽毛总结

最新推荐文章于 2022-11-26 22:48:25 发布
最新推荐文章于 2022-11-26 22:48:25 发布
阅读量796 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40029828/article/details/114497480
版权
本文总结了在React函数式组件中进行路由跳转和状态管理的经验。利用`react-router`的`history.push`进行路由切换，注意需配合`withRouter`以获取`props.history`。在状态管理方面，结合`useContext`和`useState`来管理组件状态，同时指出`...展开操作符`在某些场景下无法获取全部元素，而`Array.push`则能实现。
摘要由CSDN通过智能技术生成
路由跳转

react-router提供了history.push api，直接使用push即可。注意组件需要用withRouter包起来，否则会报错history不存在

 history.push("/my");
  • (in promise) TypeError: history.push is not a function
    即使withRouter导出了，这里也要用props.history，因为history.push的api挂在props上面

在这里插入图片描述

状态管理

useContext结合useState

  • …展开操作符只能得到最后一个，Array.push却可以

在这里插入图片描述
在这里插入图片描述

最低0.47元/天 解锁文章
通过history.pushState无刷新改变url
06-26 1378
背景在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问题，人们
react实现全选和反选_react实现复选框全选和反选组件效果
weixin_31068553的博客
01-30 1354
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下运行效果图如下：代码：import React, { Component } from 'react';import { withRouter } from 'react-router-dom';// import Menu from '../menu/Menu.jsx';class List extends...
在React Hook里使用history.push跳转
Dust的博客
08-07 3774
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法 首先引入 import { useHistory } from 'react-router-dom' 使用 let history = useHistory() function OnFinish(values: any) { console.log('Success:', values) history.push('/main', { dust
JS应用push时提示push is not a function
codeFly
08-19 2万+
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 为什么有时候会提示失效呢： 如下用的时候 function(){ let num={}; $.each(it,function(index,items){ num.push(items['##']) }) } 这样会提示如下：num.push is not a function； 原因是定义的时候把他定义成了对象，实际应用当中应该是这样的 <script .
vue中的$router 和 $route的区别
liudachu的博客
09-29 545
vue2.0中的$router 和 $route的区别 最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的
(八)学习笔记--解决react中history.push无效的问题
Augustine_Cyq的博客
05-26 4311
场景： 一个组件中，含有ul展开数组的组件，在每一行中，都能点击相应的这一行，跳转到对应的页面。 也就是说，组件套组件，子组件中this.props.history.push无法工作。提示没有push这个函数。 因为这时的props中没有history这个属性。 解决方法 1. 使用 withRouter withRouter高阶组件，提供了history让你使用~ import React from "react"; import {withRouter} from "react-r.
使用history.state不刷新页面
我是小奶音啊的博客
02-01 778
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
React羽毛图标组件开发与下载指南
资源摘要信息:"羽毛图标的React组件_JavaScript_下载.zip" 文件是一份包含React框架实现的羽毛图标组件的压缩文件。React是一种用于构建用户界面的JavaScript库，由Facebook开发并维护。在网页设计和应用开发中，...
WUbadminton:瓦拉拉克大学羽毛球场应用程序
03-22
瓦拉拉克大学羽毛球场应用程序，简称"WUbadminton"，是一款专为该大学学生、教职员工和羽毛球爱好者设计的应用程序。该应用利用JavaScript技术进行开发，旨在提供便捷的羽毛球场地预订、活动组织以及相关羽毛球信息...
千锋 Vue 详细笔记整理
embelfe_segge的博客
03-06 7955
视频笔记是根据B站 千锋 涛哥 - SpringBoot+vue+前后端分离项目《锋迷商城》实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一、vue 的简介 1.1 使用 JQuery 的复杂性问题 1.2 VUE 简介 1.2.1 前端框架 1.2.2 MVVM 二、 vue 入门使用 2.1 vue 的引入 2.2 入门案例 – Hello World 三、 vue 的语法 3.1 基本类型数据和字符串 3.2 对象类型数据 3.3.
解决报错：Uncaught (in promise) TypeError: _this.roomInformation.push is not a function
m0_65274248的博客
11-26 732
解决报错：Uncaught (in promise) TypeError: _this.roomInformation.push is not a function
JS中提示push is not a function
Dreamer0Action的博客
09-04 2万+
上星期在做联系的时候在Js中遇到了往数组添加对象的问题，提示push is not a function，找了好久才发现自己定义的不是数组，而是对象，以后一定要多多注意。
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 27万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
小白使用react——解决this.props.history.push无法跳转的问题
yingzizizizizizzz的专栏
12-08 5万+
场景： 一个组件中，含有ul展开数组的组件，在每一行中，都能点击相应的这一行，跳转到对应的页面。 也就是说，组件套组件，子组件中this.props.history.push无法工作。提示没有push这个函数。 因为这时的props中没有history这个属性。 解决办法： 在父组件中，传递一个history。 子组件中用history.push   就可以啦 参考资料： http
TypeError: _this2.dataList.push is not a function的解决Object.assign
Know Destiny的博客
12-24 6359
1.场景：两个下一步，最后一个提交认证 2.方式：写到一个页面中，然后根据状态值来区分哪一步 3.定义一个dataList数组 export default { components: { }, data() { return { dataList: [], ***此处省略 } } } 第一步赋值： this.dataList = this.form1 第二步赋值 this.dataList.push(this.form2) 报错 TypeError: _this2.dataList.push is no
this.props.history.push报错Uncaught TypeError: Cannot read property 'push' of undefined
github_38928905的博客
04-22 5622
情况：在app中引入了一个footerNav组件（路由也都引入了），然后在footerNav中点击按钮跳转，结果报错： Uncaught TypeError: Cannot read property 'push' of undefined 解决： 方式1 通过propTypes将父组件app对象传入子组件footerNav import PropTypes from 'prop...
react函数式组件通信
最新发布
08-15
在React函数式组件中，可以使用以下方式进行组件间的通信： 1. Props传递：和在类组件中一样，函数式组件可以通过props将数据传递给其他组件。父组件可以将数据作为props传递给子组件，子组件可以使用props接收并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值