【实战】 八、用户选择器与项目编辑功能(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十四)

这篇具有很好参考价值的文章主要介绍了【实战】 八、用户选择器与项目编辑功能(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十四)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


学习内容来源: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
prettier 2.8.4
json-server 0.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 状态管理

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

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

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

八、用户选择器与项目编辑功能

1.实现id-select.tsx解决id类型 难题

上一节最后的 bug 可以通过自定义组件来优化掉

新建 src\types\index.ts 存放常用类型:

export type SN = string | number

新建组件 src\components\id-select.tsx

import { Select } from "antd"
import { SN } from "types"

type SelectProps = React.ComponentProps<typeof Select>

// 类型不是简单的后来者居上,而是寻求"最大公约数"的方式
interface IdSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'>{
  value: SN | null | undefined,
  onChange: (value?: number) => void,
  defaultOptionName?: string,
  options?: {name: string, id: number}[]
}

/**
 * value 可以传入多种类型的值
 * onChange 只会回调 number | undefined 类型
 * 当isNaN(Number(value)) 为 true 的时候,代表选择默认类型
 * 当选择默认类型时,onChange 会回调 undefined
 * @param props 
 */
export const IdSelect = (props: IdSelectProps) => {
  const { value, onChange, defaultOptionName, options, ...restProps } = props
  return <Select
    value={toNumber(value)}
    onChange={value => onChange(toNumber(value) || undefined)}
    { ...restProps }
  >
    {
      defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null
    }
    {
      options?.map(option => <Select.Option key={option.id} value={option.id}>{option.name}</Select.Option>)
    }
  </Select>
}

const toNumber = (value: unknown) => isNaN(Number(value)) ? 0 : Number(value)

2.抽象user-select组件选择用户

修改 src\screens\ProjectList\components\List.tsx(将 Project 中的 idpersonId 类型统一改为 number):

...
export interface Project {
  id: number;
  ...
  personId: number;
  ...
}
...

修改 src\screens\ProjectList\components\SearchPanel.tsx(将 User 中的 id 改为 number 类型,使用Utility Types处理 Project 类型 生成 param 的可选子类型):

...
import { Project } from "./List";

export interface User {
  id: number;
  ...
}
interface SearchPanelProps {
  ...
  param: Partial<Pick<Project, 'name' | 'personId'>>
  ...
}
...
  • Partial:将每个子类型转换为可选类型
  • Pick:经过 泛型约束 生成一个新类型

由于从 URL 中得到的数据都是 string 类型,因此需要特殊处理,接下来将这部分单独抽离出来

新建 src\screens\ProjectList\utils.ts

import { useUrlQueryParam } from "utils/url";

export const useProjectsSearchParams = () => {
  const [param, setParam] = useUrlQueryParam(["name", "personId"]);
  return [
    {...param, personId: Number(param.personId) || undefined},
    setParam
  ] as const
}

src\screens\ProjectList\index.tsx 中调用它:

...
import { useProjectsSearchParams } from "./utils";

export const ProjectList = () => {
  useDocumentTitle('项目列表')

  const [param, setParam] = useProjectsSearchParams()
  ...
};
...

接下来重头戏来了

新建 src\components\user-select.tsx

import { useUsers } from "utils/use-users";
import { IdSelect } from "./id-select";

export const UserSelect = (props: React.ComponentProps<typeof IdSelect>) => {
  const {data: users} = useUsers()
  return <IdSelect options={users || []} {...props}/>
};

src\screens\ProjectList\components\SearchPanel.tsx 中调用 UserSelect 组件:

...
import { UserSelect } from "components/user-select";

...
export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {
  return (
    <Form {...}>
      ...
      <Form.Item>
        <UserSelect
          defaultOptionName="负责人"
          value={param.personId}
          onChange={(value) => setParam({ ...param, personId: value, })}
        />
      </Form.Item>
    </Form>
  );
};

查看页面效果,又发生了熟悉的事情。。。无限循环

打开 wdyr 的开关,查找原因,发现之前的 useUrlQueryParam 中的 param 使用 useMemo 后不再创建新对象,但是经过 useProjectsSearchParams 处理,每次返回的又是新对象,那还是老办法,用 useMemo 解决

修改 src\screens\ProjectList\utils.ts

import { useMemo } from "react";
...
// 项目列表搜索的参数
export const useProjectsSearchParams = () => {
  ...
  return [
    useMemo(() =>({...param, personId: Number(param.personId) || undefined}), [param]),
    setParam
  ] as const
}

查看页面,问题解决

还有个特别小的问题,一般情况下容易忽略:

  • 当切换到某个具体负责人时,刷新页面(带参链接首次加载)时,userSelect 组件在 users 数据请求回来之前由于找不到匹配项,会短暂显示 personId

接下来解决一下

修改 src\components\id-select.tsx(请求到 users 数据之前值为 0,即显示默认选项负责人):

...
export const IdSelect = (props: IdSelectProps) => {
  ...
  return (
    <Select
      value={options?.length ? toNumber(value) : 0}
      {...}
    >...</Select>
  );
};
...

查看页面效果,完美!

3.自定义 Star 组件做项目收藏标记

为每个项目新增一个收藏标记

新建组件 Star src\components\star.tsx

import { Rate } from "antd";

interface StarProps extends React.ComponentProps<typeof Rate> {
  checked: boolean,
  onCheckedChange?: (checked: boolean) => void
}

export const Star = ({checked, onCheckedChange, ...restProps}: StarProps) => {
  return <Rate
    count={1}
    value={checked ? 1 : 0}
    onChange={num => onCheckedChange?.(!!num)}
    {...restProps}
  />
}
  • 注意组件原有属性的透传
  • 评分 Rate - Ant Design

新增 编辑和新增 的 Custom Hook src\utils\project.ts

...
export const useEditProject = () => {
  const client = useHttp();
  const { run, ...asyncResult } = useAsync<Project[]>();
  const mutate = (params: Partial<Project>) => {
    return run(client(`projects/${params.id}`, {
      data: params,
      method: 'PATCH'
    }))
  }

  return {
    mutate,
    ...asyncResult
  };
};

export const useAddProject = () => {
  const client = useHttp();
  const { run, ...asyncResult } = useAsync<Project[]>();
  const mutate = (params: Partial<Project>) => {
    return run(client(`projects/${params.id}`, {
      data: params,
      method: 'POST'
    }))
  }

  return {
    mutate,
    ...asyncResult
  };
};

这部分在构思时需要考虑到,Hook 只能在 函数组件内的最外层使用,不能在外面再嵌套其他非组件的普通函数,因此需要提前暴露出一个函数来接收参数并处理相关逻辑(闭包的应用),否则会出现下面的报错:

  • React Hook "useEditProject" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

编辑 src\screens\ProjectList\components\List.tsx(使用 Star 组件):

...
import { Star } from "components/star";
import { useEditProject } from "utils/project";
...
// type PropsType = Omit<ListProps, 'users'>
export const List = ({ users, ...props }: ListProps) => {
  const { mutate } = useEditProject()
  // 函数式编程 柯里化
  const starProject = (id: number) => (star: boolean) => mutate({id, star})
  return (
    <Table
      pagination={false}
      columns={[
        {
          title: <Star checked={true} disabled={true}/>,
          render: (val, record) =>
            <Star
              checked={record.star}
              // stared => starProject(record.id)(stared)
              onCheckedChange={starProject(record.id)}
            />
        },
        ...
      ]}
      {...props}
    ></Table>
  );
};

  • 在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。
  • 柯里化(currying)又称部分求值。一个柯里化的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。

查看页面,点击标记一个,但是没有反应,控制台 Network 中有网络请求,刷新页面再看,数据已经更新了,这个问题后续解决


部分引用笔记还在草稿阶段,敬请期待。。。文章来源地址https://www.toymoban.com/news/detail-603485.html

到了这里,关于【实战】 八、用户选择器与项目编辑功能(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十四)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包