各种问题解决方案积累

1、Unexpected lexical declaration in case block

正如字面意思一样:case块中意外的词法声明，是一个eslint(no-case-declarations)的报错
例如：下面代码就会报错

switch (name) {
	case 'zhangsan':
		const tem = '张三'
		break;
	case 'Search':
		const tem = '李四'
		break;
	default：
		break;

解决办法：两种

1. 添加块级作用域 { } ，使用 { } 将 case 包裹起来
2. 直接忽略 eslint 校验吧

switch (name) {
	case 'zhangsan':{
		const tem = '张三'
		break;
	}
	case 'Search':
		// eslint-disable-next-line no-case-declarations
		const tem = '李四'
		break;
	default：
		break;

2、模块“"…/…/node_modules/umi/types"”没有导出的成员“router”。你是否指的是“Router”?ts(2724)

umi2 升级 umi3 后使用 router 报错

由于 umi3 将 router 改成 history 了，使用 history 即可

import { history } from 'umi';
history.push('/app/index');

3、gitlab CI 中报错 Module ‘"…/…/node_modules/umi/types"’ has no exported member ‘history’. Did you mean ‘History’

lint 的 script 中添加 yarn run postinstall 指令，package.json中添加 postinstall 命令
"postinstall": "umi generate tmp",

lint:
    script:
        - "yarn run postinstall"
        - "yarn run lint:tsc"
        - "yarn run lint:es"

4、antd4 中 Menu 中使用 inonfont 的 Icon 菜单折叠无法隐藏 title

添加 anticon 类名，menu 中是通过该命名设置样式的

const RouterIcon: React.FC<RouterIcon> = ({ type }) => {
    return (
        // 必须加上 anticon 的样式，否则 menu 无法处理
        <svg className={`anticon ${styles.icon}`}>
            <use xlinkHref={`#${type}`} />
        </svg>
    );
};

<SubMenu title={item.name} icon={<RouterIcon type={item.icon} />} key={item.key || item.path}>
	<Menu.Item></Menu.Item>
</SubMenu>

<Menu.Item key={item.key || item.path} icon={<RouterIcon type={item.icon} />}>
	<Link to={item.path}>{item.name}</Link>
</Menu.Item>

5、axios 的 delete方式使用

1. 参数放在 query 中

const delete = param =>
    http
        .delete(`url`, { params: param })
        .then()
        .catch();

2. 参数放在 body 中

const delete = param =>
    http
        .delete(`url`, { data: param })
        .then()
        .catch();

6、找不到模块xxx或其相应的类型声明。ts(2307)

场景1（没有declare声明）

使用 import help from 'app';报错 找不到模块app或其相应的类型声明。ts(2307)

解决方案

typing.d.ts 文件中添加

declare module 'app' {
    const help: any;
    export default help;
}

场景2（typing.d.ts 文件中使用了 import 引入类型）

import { Help } from './typings';

declare module 'app' {
    const help: Help;
    export default help;
}

解决方案 方案来源（访问链接需要翻墙）

type Help = import('。/typings').Help;

declare module 'app' {
    const help: Help;
    export default help;
}

7、 dva 启动报错 ./node_modules/history/esm/history.js

2.4.1版本的dva会有这个问题 issue
解决办法：升级dva版本或者按照issue中的解决

8、使用 moment 报waring Deprecation warning: value provided is not in a recognized RFC2822 or ISO format

9、使用jest + ts测试函数无法引用@路径，报错“找不到模块“@/util/dict”或其相应的类型声明”

参考链接

1. 根目录添加 jest.config.js 配置文件（umi的话会和本身umi自带的进行merge）
2. 根据 tsconfig.json 中的配置进行 moduleNameMapper 配置
   举例

"paths": {
    "@/*": ["src/*"],           
},

module.exports = {
    moduleNameMapper: {
        '@/(.*)': '<rootDir>/src/$1',
    },
};

10、Promise.allSettled 使用

查询地址

useEffect(() => {
        Promise.allSettled([getDealerNames(), getAllUploaderList(), getAllCustomerSuccess()]).then(
            ([dealer, uploader, customer]) => {
                setDealerNames(dealer.status === 'fulfilled' ? dealer.value.dealers : []);
                setUploaderList(uploader.status === 'fulfilled' ? uploader.value.uploader : []);
                setCustomerSuccessList(customer.status === 'fulfilled' ? customer.value.customersuccess : []);
            }
        );
    }, []);

11、window. location.href 循环下载多个url

// 延时器
const sleep = (gap: number) => return new Promise(resolve => sleepRef.current = window.setTimeout(resolve, gap));
// 循环下载
const downloadMultiUrl = async (urlList: string[]) => {
    const handleDownload = async (url: string) => {
        if (url) {
            await sleep(1000);
            window.location.href = url;
        }
    };
    const downList = [];
    for (const item of urlList) {
        downList.push(handleDownload(item));
    }
    await Promise.all(downList);
};

12、浏览器直接预览PDF文件（不使用pdf.js）

方案一（推荐）

// originFileObj 是读取的文件对象，如上传组件读取到的
const fileURL = URL.createObjectURL(originFileObj);
window.open(fileURL);

方案二（有些文件打不开，原因没找到，建议用第一种）

// 用 FileReader 解析 originFileObj 得到 base64 然后使用浏览器直接打开一个嵌有 iframe 的tab
if (window.FileReader) {
    const fr = new FileReader();
    fr.onloadend = e => {
        if (typeof e.target?.result === 'string') {
            const pdfWindow = window.open('');
            pdfWindow?.document.write(
                `<iframe width='100%' height='100%' src='${encodeURI(e.target.result)}'></iframe>`
            );
        }
    };
    fr.readAsDataURL(originFileObj);
}