學(xué)習(xí)內(nèi)容來(lái)源：React + React Hook + TS 最佳實(shí)踐-慕課網(wǎng)

相對(duì)原教程，我在學(xué)習(xí)開(kāi)始時(shí)（2023.03）采用的是當(dāng)前最新版本：

具體配置、操作和內(nèi)容會(huì)有差異，“坑”也會(huì)有所不同。。。

一、項(xiàng)目起航：項(xiàng)目初始化與配置

• 一、項(xiàng)目起航：項(xiàng)目初始化與配置

二、React 與 Hook 應(yīng)用：實(shí)現(xiàn)項(xiàng)目列表

• 二、React 與 Hook 應(yīng)用：實(shí)現(xiàn)項(xiàng)目列表

三、TS 應(yīng)用：JS神助攻 - 強(qiáng)類(lèi)型

• 三、 TS 應(yīng)用：JS神助攻 - 強(qiáng)類(lèi)型

四、JWT、用戶認(rèn)證與異步請(qǐng)求

• 四、 JWT、用戶認(rèn)證與異步請(qǐng)求(上)

---

• 四、 JWT、用戶認(rèn)證與異步請(qǐng)求(下)

五、CSS 其實(shí)很簡(jiǎn)單 - 用 CSS-in-JS 添加樣式

• 五、CSS 其實(shí)很簡(jiǎn)單 - 用 CSS-in-JS 添加樣式(上)

---

• 五、CSS 其實(shí)很簡(jiǎn)單 - 用 CSS-in-JS 添加樣式(下)

六、用戶體驗(yàn)優(yōu)化 - 加載中和錯(cuò)誤狀態(tài)處理

• 六、用戶體驗(yàn)優(yōu)化 - 加載中和錯(cuò)誤狀態(tài)處理(上)

---

• 六、用戶體驗(yàn)優(yōu)化 - 加載中和錯(cuò)誤狀態(tài)處理(中)

---

• 六、用戶體驗(yàn)優(yōu)化 - 加載中和錯(cuò)誤狀態(tài)處理(下)

七、Hook，路由，與 URL 狀態(tài)管理

1+2.

• 七、Hook，路由，與 URL 狀態(tài)管理(上)

3~6

• 七、Hook，路由，與 URL 狀態(tài)管理(中)

7.完成URL狀態(tài)管理與JS中的 iterator講解

searchParams 拿到了, 接下來(lái)用暴露出來(lái)的 setSearchParams 來(lái)替換 ProjectList 里的 setParam

修改 src\screens\ProjectList\index.tsx：

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

但是這樣使用 setParam 時(shí)若是傳入一個(gè) { name1: 'Jack' } 的參數(shù)，沒(méi)有任何報(bào)錯(cuò)攔截，這樣肯定是不行的，所以需要在 setParam 即 setSearchParams 中使用對(duì) 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 可能會(huì)返回 null，需要預(yù)設(shè)值來(lái)兼容
        return { ...prev, [key]: searchParams.get(key) || "" };
        // 初始值會(huì)對(duì)類(lèi)型造成影響，需要手動(dòng)指定
      }, {} 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;
};

• 遇到類(lèi)似下面這樣的類(lèi)型不匹配問(wèn)題，可以直接使用 as 來(lái)強(qiáng)制指定為提示的類(lèi)型
  • 類(lèi)型“{ [x: string]: unknown; }”的參數(shù)不能賦給類(lèi)型“URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit) | undefined”的參數(shù)。

通過(guò) Object.fromEntries 引出 Iterator 的概念：

Symbol.iterator 為每一個(gè)對(duì)象定義了默認(rèn)的迭代器。該迭代器可以被 for...of 循環(huán)使用。

Symbol.iterator - JavaScript | MDN

在瀏覽器的 console 中做個(gè)小實(shí)驗(yàn)：

• 定義一個(gè)數(shù)組并使用 for..of 遍歷

let arr = [1, 2, 3]
for(v of arr) { console.log(v) }
// 1
// 2
// 3

• 通過(guò) Symbol.iterator 屬性查看 此數(shù)組的 遍歷器

arr[Symbol.iterator]
// ? values() { [native code] }

• 將其執(zhí)行結(jié)果拿出來(lái)

let i = a[Symbol.iterator]()
i
// Array Iterator {}
//  [[Prototype]]: Array Iterator
//    next: ? next()
//    Symbol(Symbol.toStringTag): "Array Iterator"
//    [[Prototype]]: Object

• 可以看到它有個(gè) next() 方法，執(zhí)行一下

i.next()
// {value: 1, done: false}
i.next()
// {value: 2, done: false}
i.next()
// {value: 3, done: false}
i.next()
// {value: undefined, done: true}

• 接下來(lái)實(shí)現(xiàn)一下自定義遍歷器

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

回歸項(xiàng)目代碼，searchParams 是 URLSearchParams 類(lèi)型，通過(guò)以下代碼可以看出使用 Object.fromEntries 可以將其（entries）轉(zhuǎn)為 object

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

代碼邏輯明白了，接下來(lái)看下頁(yè)面效果：

• http://localhost:3000/projects?name=騎手&personId=18 直接訪問(wèn)，參數(shù)在頁(yè)面中保持
• 在頁(yè)面中修改參數(shù)，URL 中同時(shí)更改，但有個(gè)小問(wèn)題，下拉選擇負(fù)責(zé)人時(shí)，頁(yè)面中展示的是 personId，接下來(lái)解決一下

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

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

運(yùn)行代碼可以發(fā)現(xiàn)，param 中 id 是 string 但 users 中是 number，沒(méi)有很好兼容，暫時(shí)在src\screens\ProjectList\components\SearchPanel.tsx 中將 id 強(qiáng)制轉(zhuǎn)換為 string（String(user.id)）：

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

查看頁(yè)面效果，功能正常啦！

部分引用筆記還在草稿階段，敬請(qǐng)期待。。。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-599759.html

到了這里，關(guān)于【實(shí)戰(zhàn)】 七、Hook，路由，與 URL 狀態(tài)管理(下) —— React17+React Hook+TS4 最佳實(shí)踐，仿 Jira 企業(yè)級(jí)項(xiàng)目（十三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！