导入textList后用useState初始化触发ESLint定义前使用错误

问题原因 #

你遇到的ESLint错误是因为在解构声明状态变量时，左边的textList属于当前作用域的新变量，在useState(textList)调用时，这个新变量还未完成定义。虽然你导入了同名的textList，但ESLint的no-use-before-define规则会优先识别当前作用域中正在声明的变量，导致误判为“未定义就使用”。

解决方案 #

有两种简单的修复方式：

1. 重命名状态变量

直接给状态变量起一个不同的名字，避免和导入的变量冲突：

import { textList } from './test.jsx';

// 用localTextList作为状态变量名
const [localTextList, setLocalTextList] = useState(textList);

2. 重命名导入的变量或使用临时变量

如果想保留状态变量名为textList，可以在导入时给原变量重命名，或者先把导入的变量存到临时变量里：

导入时重命名：

// 将导入的textList重命名为initialTextList
import { textList as initialTextList } from './test.jsx';

const [textList, setTextList] = useState(initialTextList);

使用临时变量：

import { textList } from './test.jsx';

// 先把导入的textList赋值给临时变量
const initialTextList = textList;
const [textList, setTextList] = useState(initialTextList);

这两种方式都能让ESLint正确识别到useState里使用的是已定义的导入变量，避免触发错误。

内容的提问来源于stack exchange，提问作者Abel Abraham