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

Question

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

的行

类型“[number, Dispatch]”不是数组类型

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

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

这似乎是一个 linting 错误，因为代码编译和运行没有任何问题。有谁知道是什么原因造成的。

我越看越觉得这是一个 VS 代码问题。每次 npm start 后，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，我没有遇到任何这些问题。

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

React Typescript Type '[number, Dispatch<SetStateAction<number>>]' is not an array type

typescript

reactjs

use-state