React Typescript Type '[number, Dispatch<SetStateAction<number>>]' 不是数组类型

Question

我在 react Typescript 中遇到了 setState 的问题，由于某种原因，当我设置状态时 VS 代码会突出显示 Type 的行

Type '[number, Dispatch]' 不是数组类型

和 类型 '[ILogin, Dispatch]' 不是数组类型。

第一个错误是由于我测试 ILogin 接口是否有问题，但 VS 代码突出显示了具有相同类型错误的两行。

这似乎是一个 linting 错误，因为代码编译并运行没有任何问题。有没有人知道可能导致这种情况的原因。

我看这个越多，它似乎是一个 VS 代码问题。每次 npm 启动后， tsconfig.json 都会更改，因此 "jsx": "react" 行更改为 "jsx": "react-jsx" 但如果该行是 react-jsx 则 VS 代码会将所有导入突出显示为错误。当我过去在谷歌上搜索过这个时，人们给出的答案是将它从 react-jsx 更改为 react。这让我觉得下面的问题在某种程度上是相关的，因为这些错误突出显示不会阻止代码编译或运行。但是我对 Typescript 的知识和经验相当有限，所以我不知道从哪里开始寻找问题。

import React, {useState} from 'react';
import { ILogin } from '../Interfaces/ILogin';
import { doLogin, fetch } from '../Services/Api';


const Login: React.FC = () => {

const [login, setLogin] = useState<ILogin>({
    username: "",
    password: "",
}) 

const [test, setTest] = useState(1);

setTest(2);

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>        {
    setLogin({
        ... login,
        [e.target.name]: e.target.value
    })
}

const handleClick = () => {
    // Console out the login object for testing
    console.log("Data")
    console.log(login)
    doLogin(login.username,login.password)
    .then(() => { 
        /* Logged in, token saved to cookie */ 
        console.log("something1")
    })
    .catch(error => { 
        /* Error when logging in, probably wrong credentials */ 
        console.log("something2")
    })
}

const testApi = () => {
    fetch('account/test')
    .then(({ response, body }) => { 
        /* Got the data! If token expired, it was renewed and saved. */ 
        console.log(body);
        console.log(response);
    })
    .catch(error => {
         /* Error getting data, probably not logged in */ 
    })
}


return (
    <div>
        <label>Username</label><br/>
        <input type="text" name="username" placeholder="Username" onChange={handleChange}/>
        <br/>
        <label>Password</label><br/>
        <input type="password" name="password" placeholder="Password" onChange={handleChange}/>
        <br/>
        <br/>
        <input type="button" value="Login" onClick={handleClick}/>
        <br/>
        <input type="button" value="API Test" onClick={testApi} />
    </div> 
)
}

export default Login;

ILogin.tsx

export interface ILogin {
    username: string;
    password: string;
}

问题已更新以显示 ILogin 界面，我认为这不是问题，因为任何 setState 都会出现相同的问题，即使是数字等基本类型。

Answer 1

据我所知，这似乎是一个 VS Code 问题，我已经开始在这个项目中使用 Atom 而不是 VS Code，我没有遇到任何这些问题。