React TypeScript中useState提示返回值不是数组类型报错如何解决

问题根因 #

你遇到的两类报错确实存在强关联，本质是项目本地安装的TypeScript版本 与 VS Code编辑器内置的TypeScript版本不兼容，属于编辑器类型校验层面的错误，和业务代码无关，所以项目可以正常编译运行。
另外你提到的tsconfig.json中"jsx": "react"被自动修改为"jsx": "react-jsx"，是React官方脚手架Create React App（CRA）4.0+版本的默认行为，新版本的JSX转换不需要在每个tsx文件顶部引入React即可正常使用，手动改回react反而会和脚手架规则冲突，导致启动时被自动覆盖。

解决步骤 #

1. 修复tsconfig配置冲突 #

保留tsconfig.json中"jsx": "react-jsx"的配置，不要手动修改为react，适配脚手架的默认规则。

2. 切换VS Code使用的TypeScript版本 #

编辑器识别不了react-jsx配置、useState解构标红都是因为VS Code用了内置的低版本TS做类型检查，按以下步骤切换为项目本地的TS版本即可：

• 打开项目中任意一个.tsx后缀的文件
• 点击VS Code底部状态栏右侧显示的TypeScript x.x.x版本号
• 在弹出的选项列表中选择「使用工作区版本」，调用项目node_modules中安装的TS版本做类型检查
• 等待编辑器重新加载校验规则，所有标红提示会自动消失

3. 永久生效配置（可选） #

如果不需要每次打开项目都手动切换版本，可以在项目根目录新建.vscode/settings.json文件，写入以下配置：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

后续VS Code打开该项目会自动使用本地的TS版本做校验。

额外代码提示 #

你提供的业务代码中存在一处不合理写法：在组件顶层直接调用setTest(2)，会触发组件无限重复渲染，建议后续将该逻辑移入useEffect或者事件回调函数中，该问题和当前的标红报错无关。

内容的提问来源于stack exchange，提问作者Mark O'Connor