misc-2025-08

8月大杂烩

使用类选择器时，如何指定多个类名？

比如我们想要选择的元素有三个类名classA, classB, classC，那么选择器可以这样写：

1	document.querySelector('.classA.classB.classC')

只要将三个类名连接起来就行，中间不需要加空格。

为什么我的请求在Chrome开发者工具中看不到？

今天和同事调试代码时发现一个奇怪的现象，有一个api调用，在浏览器开发者工具中的network面板中竟然看不到它的response，研究了半天也没找到原因，后来发现是因为调用api之后，使用了window.location.href = path - 这句代码会导致页面进行一个强制刷新，所以api调用的记录也被刷掉了，response面板中也看不到。

如果要修复这个问题，可以使用useNavigate代替，代码如下：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
const path = xxx;
navigate(path, {replace: true});

使用JSON.parse时一定要注意异常处理

一个好的习惯是，始终用try-catch包裹JSON.parse，以防止解析失败导致的错误。例如：

try {
  const data = JSON.parse(jsonString);
  // 处理解析后的数据
} catch (error) {
  console.error('JSON解析失败:', error);
}

JSON.parse非常容易出错，当传入的参数是空字符串, undefined或不合法的JSON字符串时，都会抛出异常。因此，始终使用try-catch来捕获这些异常是一个好的习惯。

1
2
3

JSON.parse(undefined); // Uncaught SyntaxError: "undefined" is not valid JSON
JSON.parse(''); // Uncaught SyntaxError: Unexpected end of JSON input
JSON.parse(null); // null

要点：

永远不要传递undefined、null或空字符串给JSON.parse。
如果要解析空字符串，应该用JSON.parse('""')来代替。
虽然null不会直接导致异常，但解析结果是null，这可能导致后续代码出错，因为我们总要访问解析结果中的字段。

如何对指定目录运行单元测试？

随着项目的进行，测试用例会越来越多，跑一次完整的测试需要的时间也水涨船高，如果我们只修改了某一个功能，那么可以只对这个功能进行单元测试。

下面的命令只对user目录运行单元测试，这个命令有个前提，那就是你的测试用例都放到src/__tests__/目录下。

1	npm run test -- src/__tests__/pages/user

如果你的测试用例是跟随业务功能代码的结构放置的，那么可以使用以下命令：

1	npm run test -- src/pages/user

也就是说，无论使用哪种方式，都要保证指定的目录下有对应的测试用例。

Ant Design Table中如何隐藏某一列？

const columns = [
  // ... 
  {
    title: '作者',
    dataIndex: 'author',
    hidden: someCondition, // someCondition = true时隐藏该列
  },
];

‘Button’ refers to a value, but is being used as a type here. Did you mean ‘typeof Button’?

组件代码如下，就这么简单的一个组件，竟然能出现上面的问题。真是服了！

import { Button } from 'antd';

export default function Users() {
  return <Button>提交</Button>;
}

仔细检查了半天也没有发现问题所在，后来一看是文件名不对！React组件文件的扩展名应该是jsx或者tsx，而不是js或者ts。而我这个组件的扩展名恰恰是.ts，将它改为.tsx后问题就解决了。

限制输入框文本长度

有两种方式，一种是在Form.Item中的rules中添加max属性，另一种是在Input组件中添加maxLength属性。

在Form.Item中添加max属性

这种方式的好处是，如果超出长度限制，会自动显示提示信息，但是用户仍然可以继续输入。

<Form.Item
  name={dataIndex}
  style={{ margin: 0 }}
  rules={[
    {
      required: true,
      message: `Please Input ${title}!`,
    },
    {
      max: 10,
      message: `Max length is 10`,
    }
  ]}
>
  {inputNode}
</Form.Item>

在Input组件中添加maxLength属性

这种方式的好处是，用户输入超过长度限制时，会被直接阻止输入。弊端是没有提示信息。

1	<Input maxLength={10} />

如果既要限制输入长度，又要提供提示信息，可以结合使用两种方式，在实际使用中，可以将MaxLength提取成公共变量，这样可以避免重复代码：

const MaxLength = 10;

<Form.Item
  name={dataIndex}
  style={{ margin: 0 }}
  rules={[
    {
      max: MaxLength,
      message: `Max length is ${MaxLength}`,
    }
  ]}
>
  <Input maxLength={MaxLength} />
</Form.Item>