更新打字稿版本时反应useState钩子上的打字稿错误答案

【问题标题】：Typescript error on react useState hook when updating typescript version更新打字稿版本时反应useState钩子上的打字稿错误
【发布时间】：2021-01-03 22:59:07
【问题描述】：

我使用 react 16.9 和 typescript 3.5.2 开发了一个 react typescript 应用程序。它使用像

这样的反应状态钩子

const [hValue, setHValue] = useState();

hValue 的类型是IValue

所以setHValue 的返回类型为React.Dispatch<any>

然后我将 typescript 版本更新为 3.9.7，它给出了编译错误，现在 setHValue 的返回类型似乎已更改为 React.Dispatch<React.SetStateAction<undefined>>

这是为什么呢？以及如何解决这个问题？

【问题讨论】：

hValue的类型是什么？
IValue 我编辑了问题并将其包括在内

标签： javascript reactjs typescript react-hooks use-state

【解决方案1】：

我们来看看useState的类型

    function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

也就是说，如果没有指定S，则默认为undefined。

所以你需要指定你的初始类型，如果hValue 是number，你可以这样做

const [hValue, setHValue] = useState<number>();

这样setValue就会变成React.Dispatch<SetStateAction<number>>类型

【讨论】：

在上面的例子中 setValue 将是 setHaValue: React.Dispatch<React.SetStateAction<number | undefined>> 类型