【实战】 七、Hook,路由,与 URL 状态管理(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十三)

文章目录

    • 一、项目起航:项目初始化与配置
    • 二、React 与 Hook 应用:实现项目列表
    • 三、TS 应用:JS神助攻 - 强类型
    • 四、JWT、用户认证与异步请求
    • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式
    • 六、用户体验优化 - 加载中和错误状态处理
    • 七、Hook,路由,与 URL 状态管理
      • 1+2.
      • 3~6
      • 7.完成URL状态管理与JS中的 iterator讲解


学习内容来源:React + React Hook + TS 最佳实践-慕课网


相对原教程,我在学习开始时(2023.03)采用的是当前最新版本:

版本
react & react-dom^18.2.0
react-router & react-router-dom^6.11.2
antd^4.24.8
@commitlint/cli & @commitlint/config-conventional^17.4.4
eslint-config-prettier^8.6.0
husky^8.0.3
lint-staged^13.1.2
prettier2.8.4
json-server0.17.2
craco-less^2.0.0
@craco/craco^7.1.0
qs^6.11.0
dayjs^1.11.7
react-helmet^6.1.0
@types/react-helmet^6.1.6
react-query^6.1.0
@welldone-software/why-did-you-render^7.0.1
@emotion/react & @emotion/styled^11.10.6

具体配置、操作和内容会有差异,“坑”也会有所不同。。。


一、项目起航:项目初始化与配置

  • 一、项目起航:项目初始化与配置

二、React 与 Hook 应用:实现项目列表

  • 二、React 与 Hook 应用:实现项目列表

三、TS 应用:JS神助攻 - 强类型

  • 三、 TS 应用:JS神助攻 - 强类型

四、JWT、用户认证与异步请求

  • 四、 JWT、用户认证与异步请求(上)

  • 四、 JWT、用户认证与异步请求(下)

五、CSS 其实很简单 - 用 CSS-in-JS 添加样式

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下)

六、用户体验优化 - 加载中和错误状态处理

  • 六、用户体验优化 - 加载中和错误状态处理(上)

  • 六、用户体验优化 - 加载中和错误状态处理(中)

  • 六、用户体验优化 - 加载中和错误状态处理(下)

七、Hook,路由,与 URL 状态管理

1+2.

  • 七、Hook,路由,与 URL 状态管理(上)

3~6

  • 七、Hook,路由,与 URL 状态管理(中)

7.完成URL状态管理与JS中的 iterator讲解

searchParams 拿到了, 接下来用暴露出来的 setSearchParams 来替换 ProjectList 里的 setParam

修改 src\screens\ProjectList\index.tsx

...
export const ProjectList = () => {const [param, setParam] = useUrlQueryParam(["name", "personId"]);...
};
...

但是这样使用 setParam 时若是传入一个 { name1: 'Jack' } 的参数,没有任何报错拦截,这样肯定是不行的,所以需要在 setParamsetSearchParams 中使用对 key 的判断

修改 src\utils\url.ts

import { useMemo } from "react";
import { URLSearchParamsInit, useSearchParams } from "react-router-dom";
import { cleanObject } from "utils";
...
export const useUrlQueryParam = <K extends string>(keys: K[]) => {const [searchParams, setSearchParams] = useSearchParams();return [useMemo(() => keys.reduce((prev, key) => {// searchParams.get 可能会返回 null,需要预设值来兼容return { ...prev, [key]: searchParams.get(key) || "" };// 初始值会对类型造成影响,需要手动指定}, {} as { [key in K]: string }),// eslint-disable-next-line react-hooks/exhaustive-deps[searchParams]),(params: Partial<{ [key in K]: unknown }>) => {const o = cleanObject({ ...Object.fromEntries(searchParams), ...params }) as URLSearchParamsInitreturn setSearchParams(o)},] as const;
};
  • 遇到类似下面这样的类型不匹配问题,可以直接使用 as 来强制指定为提示的类型
    • 类型“{ [x: string]: unknown; }”的参数不能赋给类型“URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit) | undefined”的参数。

通过 Object.fromEntries 引出 Iterator 的概念:

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

Symbol.iterator - JavaScript | MDN

在浏览器的 console 中做个小实验:

  • 定义一个数组并使用 for..of 遍历
let arr = [1, 2, 3]
for(v of arr) { console.log(v) }
// 1
// 2
// 3
  • 通过 Symbol.iterator 属性查看 此数组的 遍历器
arr[Symbol.iterator]
// ƒ values() { [native code] }
  • 将其执行结果拿出来
let i = a[Symbol.iterator]()
i
// Array Iterator {}
//  [[Prototype]]: Array Iterator
//    next: ƒ next()
//    Symbol(Symbol.toStringTag): "Array Iterator"
//    [[Prototype]]: Object
  • 可以看到它有个 next() 方法,执行一下
i.next()
// {value: 1, done: false}
i.next()
// {value: 2, done: false}
i.next()
// {value: 3, done: false}
i.next()
// {value: undefined, done: true}
  • 接下来实现一下自定义遍历器
const obj = {data: ["hello", "world"],[Symbol.iterator]() {const self = this;let index = 0;return {next() {if (index < self.data.length) {return {value: self.data[index++] + "!",done: false};} else {return { value: undefined, done: true };}}};}
};for (let o of obj) {console.log(o);
}

线上地址:https://codesandbox.io/s/upbeat-wood-bum3j

回归项目代码,searchParamsURLSearchParams 类型,通过以下代码可以看出使用 Object.fromEntries 可以将其(entries)转为 object

new URLSearchParams({name: 'Jack'})[Symbol.iterator]
// ƒ entries() { [native code] }

代码逻辑明白了,接下来看下页面效果:

  • http://localhost:3000/projects?name=骑手&personId=18 直接访问,参数在页面中保持
  • 在页面中修改参数,URL 中同时更改,但有个小问题,下拉选择负责人时,页面中展示的是 personId,接下来解决一下

src\screens\ProjectList\index.tsx 中打印 param

src\screens\ProjectList\components\SearchPanel.tsx 中打印 users

运行代码可以发现,paramidstringusers 中是 number,没有很好兼容,暂时在src\screens\ProjectList\components\SearchPanel.tsx 中将 id 强制转换为 stringString(user.id)):

...
export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {return (<Form css={{ marginBottom: "2rem", ">*": "" }} layout="inline">...<Form.Item><Select {...}><Select.Option value="">负责人</Select.Option>{users.map((user) => (<Select.Option key={user.id} value={String(user.id)}>...</Select.Option>))}</Select></Form.Item></Form>);
};

查看页面效果,功能正常啦!


部分引用笔记还在草稿阶段,敬请期待。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-upload将上传的图片转为base64

el-upload将上传的图片转为base64 文章目录 el-upload将上传的图片转为base641. el-upload属性设置2. 图片转base64格式方法3. 在绑定的方法中调用 elementui使用el-upload时将选择的图片转为base64格式,然后再上传 1. el-upload属性设置 使用组件&#xff0c;然后on-change绑定…

【NLP】如何使用Hugging-Face-Pipelines?

一、说明 随着最近开发的库&#xff0c;执行深度学习分析变得更加容易。其中一个库是拥抱脸。Hugging Face 是一个平台&#xff0c;可为 NLP 任务&#xff08;如文本分类、情感分析等&#xff09;提供预先训练的语言模型。 本博客将引导您了解如何使用拥抱面部管道执行 NLP 任务…

代码随想录算法训练营day45 70.爬楼梯(进阶) 322.零钱兑换 279.完全平方数

题目链接70.爬楼梯(进阶) class Solution {public int climbStairs(int n) {int[] dp new int[n1];int m 2;dp[0] 1;for(int i 1; i < n; i){for(int j 1; j < m; j){if(i > j)dp[i] dp[i-j];}}return dp[n];} }题目链接322.零钱兑换 class Solution {public …

超详细图文教程:3DS Max 中创建低多边形游戏长剑模型

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 在此&#xff0c;由两部分组成的教程的第一部分中&#xff0c;我将向您展示如何&#xff1a; 对剑柄进行建模剑的护手模型剑刃建模 1. 如何制作剑柄 步骤 1 在本教程中使用正交视图。要更改视图&#x…

python安装OpenCV

安装OpenCV pip install opencv-pythonpython OpenCV 打开摄像头 import cv2WIDTH 1080 HEIGHT 720cap cv2.VideoCapture(0, cv2.CAP_DSHOW) cap.set(cv2.CAP_PROP_FRAME_WIDTH, WIDTH) cap.set(cv2.CAP_PROP_FRAME_HEIGHT, HEIGHT)while True:ok,frame cap.read()# pri…

阿里巴巴前端开发规范

前言 规范的目的是为了编写高质量的代码&#xff0c;让你的团队成员每天的心情都是愉悦的&#xff0c;大家在一起是快乐的。 现在软件架构的复杂性需要协同开发完成&#xff0c;如何高效地协同呢&#xff1f;无规矩不成方圆&#xff0c;无规范难以协同&#xff0c;比如&#xf…

机器学习概念

文章目录 一、机器学习概念1. 机器学习基本概念2. 基于规则的学习3. 基于模型学习4. 机器学习数据集描述二、机器学习分类1. 监督学习1.1 分类问题1.2 回归问题2. 无监督学习2.1 聚类问题2.2 数据降维3. 半监督学习4. 强化学习三、拟合问题1. 欠拟合2. 过拟合3. 奥卡姆剃刀原则…

Android:aidl简单应用

创建aidl文件&#xff1a;IMyAidlInterface.aidl Build-> Clean Project 重新编译下项目 生成IMyAidlInterface.class文件 interface IMyAidlInterface { void basicTypes(int jk); } --MyService public class MyService extends Service { //定义音乐…

AI时代带来的图片造假危机,该如何解决

一、前言 当今&#xff0c;图片造假问题非常泛滥&#xff0c;已经成为现代社会中一个严峻的问题。随着AI技术不断的发展&#xff0c;人们可以轻松地通过图像编辑和AI智能生成来篡改和伪造图片&#xff0c;使其看起来真实而难以辨别&#xff0c;之前就看到过一对硕士夫妻为了骗…

uni-app:页面跳转

uni.navigateTo: 不关闭当前页面&#xff0c;跳转到一个新页面。 uni.redirectTo: 关闭当前页面&#xff0c;跳转到应用中的某个页面。 uni.reLaunch: 关闭所有页面&#xff0c;打开应用中的某个页面。 uni.switchTab: 跳转到应用的底部选项卡页面。 uni.navigateBack: 返回上一…

Flink-端到端精确一次(End-To-End Exactly-Once)

1.总结 目的&#xff1a;想要在故障恢复后不丢数据 输入端 保证可以重复发送数据如果是kafka&#xff0c;Flink负责维护offset&#xff0c;不用kafka维护设置kafka的隔离级别为&#xff1a;读已提交flink 开启检查点采用对齐或者不对齐的精确一次输出端 kafka 幂等事务两阶段…

一文了解Python中的while循环语句

目录 &#x1f969;循环语句是什么 &#x1f969;while循环 &#x1f969;遍历猜数字 &#x1f969;while循环嵌套 &#x1f969;while循环嵌套案例 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;Python从入门到精通专栏 循环语句是什…

Mysql表锁与行锁

Mysql锁实战 前言&#xff1a;什么是锁一&#xff1a;全局锁1.1 概念1.2 作用1.3 使用1.4 特点 二&#xff1a;表级锁2.1 概念2.2 分类2.2.1 表锁2.2.2 元数据锁 MDL2.2.3 意向锁 三&#xff1a;行级锁3.1 行锁(Record Lock)3.2 间隙锁(Gap Lock)3.3 临键锁(Next-Key Lock): 四…

C# 委托详解

一.委托的概念 C#中委托也叫代理&#xff0c;委托提供了后期绑定机制(官方解释)&#xff0c;功能类似于C中的函数指针&#xff0c;它存储的就是一系列具有相同签名和返回类型的方法的地址&#xff0c;调用委托的时候&#xff0c;它所包含的所有方法都会被执行。 二.委托的用法…

自然语言处理基础详解入门

1、自然语言的概念 自然语言是指人类社会约定俗成的&#xff0c;并且区别于人工语言&#xff08;如计算机程序&#xff09;的语言&#xff0c;&#xff0c;是自然而然的随着人类社会发展演变而来的语言&#xff0c;它是人类学习生活的重要工具。 2、自然语言处理概述 自然语言…

Redis【实践篇】之RedisTemplate基本操作

Redis 从入门到精通【应用篇】之RedisTemplate详解 文章目录 Redis 从入门到精通【应用篇】之RedisTemplate详解0. 前言1. RedisTemplate 方法1. 设置RedisTemplate的序列化方式2. RedisTemplate的基本操作 2. 源码浅析2.1. 构造方法2.2. 序列化方式2.3. RedisTemplate的操作方…

【数据可视化】基于Python和Echarts的中国经济发展与人口变化可视化大屏

1.题目要求 本次课程设计要求使用Python和ECharts实现数据可视化大屏。要求每个人的数据集不同&#xff0c;用ECharts制作Dashboard&#xff08;总共至少4图&#xff09;&#xff0c;要求输入查询项&#xff08;地点和时间&#xff09;可查询数据&#xff0c;查询的数据的地理…

Stable Diffusion如何生成高质量的图-prompt写法介绍

文章目录 Stable Diffusion使用尝试下效果prompt的编写技巧prompt 和 negative promptPrompt格式Prompt规则细节优化Guidance Scale 总结 Stable Diffusion Stable Diffusion是一个开源的图像生成AI系统,由Anthropic公司开发。它基于 Transformer模型架构,可以通过文字描述生成…

Asp.net Core配置CORS 跨域无效(记录一下)

问题 学习老杨的英语网站项目&#xff0c;运行项目时&#xff0c;发现出现了跨域的问题。 然后自己建一项目&#xff0c;进行配置&#xff0c;测试&#xff0c;发现配置CORS 跨域时&#xff0c;发现跨域的配置无效&#xff0c;依旧报错。 解决 网上找了一天&#xff0c;然后…

USG6000v防火墙的基本使用:制定安全策略让不同安全区域的设备进行访问

目录 一、首先配置环境&#xff1a; 二、实验拓扑及说明 拓扑&#xff1a; PC1和PC2配置ip地址&#xff1a;​编辑​编辑 r4路由器配置ip&#xff1a; 进行防火墙的设置&#xff1a; 1、创建trust1区域和untrust1区域 2、制定防火墙的策略&#xff1a; 3、为防火墙增加可以…