项目主体开发临近尾声，顺利进入了测试阶段。为期三个月的开发期间，使我对react，特别是hooks的理解以及umi框架的理解大大提升。在此将umi与antdPro框架在使用过程中遇到的问题与解决方案整理如下。

0 vscode配置

0.1 windows环境下配置vscode默认终端

打开setting.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


"terminal.integrated.profiles.windows": {
	"PowerShell": {
		"source": "PowerShell",
		"icon": "terminal-powershell"
	},
	"Command Prompt": {
		"path": [
			"${env:windir}\\Sysnative\\cmd.exe",
			"${env:windir}\\System32\\cmd.exe"
		],
		"args": [],
		"icon": "terminal-cmd"
	},
	"Git-Bash": {
		"path": "D:\\Git\\bin\\bash.exe",
		"args": []
	}
},
"terminal.integrated.defaultProfile.windows": "Git-Bash"

1 Ant Design Pro

1.1 全局样式

全局的样式（包括覆盖原生antd的css）可以写到global.less中，记得属性后加!important

打包后样式失效时，可以尝试关闭config.js中的按需加载（dynamicImport），但可能对平台首页加载速度有一定影响

1.2 Pro表单项onChange事件无效

使用表单项组件时onChange事件失效

在表单项的fieldProps属性中定义onChange事件即可，fieldProps即Pro组件对应的原生antd属性。

1.3 ProComponents

1.3.1 ProTable

字段找不到

进行列配置时，对应字段可能在对象深层，在配置dataIndex时可以用数组的形式，例如
1

dataIndex:['data', 'placeNumber', 'method']
那么ProTable就会将行数据的data.placeNumber.method值呈现在表格中了

可编辑表格编辑状态默认值

EditableProTable的columns配置中的valueEnum是用来转换字符串类型的枚举（配合valueType:'select'替代render），对于非字符串字段（如数值或布尔类型），则会出现编辑状态的默认值为空或为实际value的bug。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{
	title: '状态'，
	dataIndex: 'status',
	valueType: 'select',
	valueEnum: {
		0: {
			text: '停工',
			status: 'Error'
		},
		1: {
			text: '正常',
			status: 'Success'
		}
	}
}

可以使用renderFormItem配置此字段的Select选择框，利用ref全局变量存储选项值，通过onSave读取ref值，对接保存或新增借口即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


// 修改后的status
const status = useRef(null)
...
{
      title: '装置状态',
      dataIndex: 'status',
  		// 功能同render
      valueType: 'select',
      valueEnum: {
        0: {
          text: '停工',
          status: 'Error',
        },
        1: {
          text: '正常',
          status: 'Success',
        },
      },
      renderFormItem: item => [
        <Select
          key='statusSelect'
          // 配置初始值
          defaultValue={item.entry?.status:null}
          onChange={v => {
            status.current = v
          }}
          rules={[
            {
              required: true,
              message: '此项为必填项',
            },
          ]}
        >
          {/* 如果Option需要被遍历出来时，源数据应为数组而非对象 */}
          <Option value={0}>停工</Option>
          <Option value={1}>正常</Option>
        </Select>,
      ],
    },

1.4 样式切换方案

局部切换样式不同于整体换肤，只需动态修改元素className即可
将className绑定为className={theme+'-table'}，theme是表示主题的state

2 umi.js

2.1 umi-request

当打包后请求url正常，但出现503等错误时，可以尝试在request.js中去除credentials: 'include'，即默认请求不携带cookie

2.2 history路由跳转

在页面内可以使用history可以实现路由跳转，也可携带参数跳转

1
2
3
4
5
6


import {history} from 'umi'

history.push({
	pathname:'xxx/xxx',
	params:{id,name,age}
})

跳转后利用useEffect监听props.location.params中的参数，进行数据请求等操作。

1
2
3
4


const {id} = props.location.params
useEffect(()=>{
	getXXXById(id).then()
},[id])

2.3 umi配置sass支持

首先安装sass插件

1
2


yarn add @umijs/plugin-sass 或
npm install @umijs/plugin-sass

如果安装完成后出现run "npm audit fix" to fix them的提示，就运行一下

其次，安装node-sass和sass-loader

1
2


npm install node-sass sass-loader 或
yarn add node-sass sass-loader

最后，配置.umirc.js（或config.js）

1
2
3
4
5


export default defineConfig({
	...
	"sass": { },
	...
})

2.4 useEcharts封装

接收图表绑定的元素ref和图表的配置option，将echarts的引入与setOption方法封装成hooks

1
2
3
4
5
6
7
8


import { useEffect } from 'react';
import * as echarts from 'echarts';
const useEcharts = (ref, option) => {
  useEffect(() => {
    echarts.init(ref?.current).setOption(option);
  }, [option, ref]);
};
export default useEcharts;

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const divRef = useRef(null);
const option = {
// 图表配置
};
useEcharts(divRef, option);
return (
	<PageContainer>
		<div ref={divRef} style={{ height: '500px', width: '800px' }} />
	</PageContainer>
);

3.其他

3.1 解决单击双击冲突

可以利用计时器配合单击事件回调，实现单击双击事件的区别触发

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


onClick={() => {
  count.current += 1
  setTimeout(() => {
  	if (count.current === 1) {
  		console.log('single click: ', count.current)
  	} else if (count.current === 2) {
  		console.log('setTimeout onDoubleClick: ', count.current)
  	}
  	count.current = 0
  }, 300)
}}

3.2 switch方法在jsx中的使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{(() => {
	switch (select) {
		case 'table':
			return xxx
		case 'charts':
			return xxx
		default:
			return null
	}
})()}

3.3 useRef

既可以作为页面内元素的实例饮用，也可以作为不会导致页面刷新的全局变量使用，

3.4 表单联动

将表单项数据保存为state，利用useMemo监听标单项变化，从而重新计算下一个标单项内容

3.5 全局模糊搜索

思路：将全部数据按行划分，将每一项整合成字符串，判断搜索的字符在数组中的index值，从而筛选并展示相应的搜索结果。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83


import { PageContainer } from '@ant-design/pro-layout'
import ProTable from '@ant-design/pro-table'
import React, { useState, useEffect, useCallback } from 'react'
import { getAllExceptionHandle } from './service'
import { omit } from 'lodash'

export default function ExceptionHandle () {
  // 表格数据
  const [dataSource, setDataSource] = useState(() => [])
  // 检索结果
  const [result, setResult] = useState(() => [])

  // 页面挂载完成后请求全部异常数据
  useEffect(() => {
    getAllExceptionHandle().then(r => {
      const arr = r.content
      const arr2 = arr.map(i => {
        return omit(i, ['author', 'createBy', 'date', 'placeNumberId'])
      })
      setResult(arr2)
      setDataSource(arr2)
    })
  }, [])

  // 全局搜索功能回调
  const handleSearch = useCallback(
    value => {
      if (dataSource.length !== 0) {
        // 输入框内容
        const v = value.target.value
        if (v !== '') {
          // 1.将data数据的全部属性值复制到数组中，按行划分
          // [[1,2,3],[4,5,6],[7,8,9]]
          const valuesArr = dataSource.map(i => Object.values(i))
          // 2.将数组拼接成一个大字符串
          // ['123','456','789']
          const valuesArrStr = valuesArr.map(i => i.join(''))
          // 3.遍历这个数组，如果字符串中包含输入的字符，则返回index值，否则返回-2
          // [0,-2,-2]
          const searchIndexArrOrig = valuesArrStr.map((i, index) =>
            i.indexOf(v) !== -1 ? index : -2,
          )
          // 4.筛选出非-2的index值
          // [0]
          const searchIndexArr = searchIndexArrOrig.filter(i => i !== -2)
          // 5.根据index值到原数组筛选出来即可
          setResult(searchIndexArr.map(i => dataSource[i]))
        } else {
          setResult(dataSource)
        }
      }
    },
    [dataSource],
  )

  // 表格列配置
  const columns = [...]
  return (
    <PageContainer breadcrumb={false}>
      <ProTable
        loading={dataSource.length === 0}
        columns={columns}
        search={false}
        dataSource={result}
        rowKey='id'
        toolbar={{
          search: {
            onChange: value => {
              handleSearch(value)
            },
          },
        }}
        options={{
          density: false,
          fullScreen: false,
          setting: false,
          reload: false,
        }}
      ></ProTable>
    </PageContainer>
  )
}

3.6 request拦截器封装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63


/** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */
import { extend } from 'umi-request';
import Notification from './Notification';

// 引入环境变量，用于区分代码运行环境
const { NODE_ENV } = process.env;
const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
/** 异常处理程序 */

const errorHandler = (error) => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    Notification(`请求错误 ${status}: ${url}`, errorText, 'small');
  } else if (!response) {
    Notification('网络错误', '您的网络发生异常，无法连接服务器', 'small');
  }

  return response;
};
/** 配置request请求时的默认参数 */

const request = extend({
  // 区分代码运行环境
  prefix: NODE_ENV === 'development' ? '/api' : 'http://10.30.20.203:8080',
  // prefix: 'http://10.30.20.203:8080',
  errorHandler,
  // 默认错误处理
  // credentials: 'include', // 默认请求是否带上cookie
  // headers: { 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'x-requested-with' },
});

/** request拦截器 **/
request.interceptors.request.use(async (url, options) => {
  let c_token = localStorage.getItem('ticket');
  if (c_token) {
    const headers = {
      Authorization: 'Bearer ' + c_token,
    };
    return { url, options: { ...options, headers: headers } };
  } else {
    return { url, options: { ...options } };
  }
});
export default request;

umi+AntdPro实战总结

Contents