文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-08-16 15:54

关注

学习内容来源: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 应用:实现项目列表

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

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


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


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



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

1+2.

3~6

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 = (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 URLSearchParamsInit      return 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 中做个小实验:

let arr = [1, 2, 3]for(v of arr) { console.log(v) }// 1// 2// 3
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
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] }

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

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 (    
{ marginBottom: "2rem", ">*": "" }} layout="inline"> ...
);};

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


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

来源地址:https://blog.csdn.net/qq_32682301/article/details/131813894

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯