React/TypeScript - “Dispatch<SetStateAction<boolean>>”代表什么？

Question

我正在用 TypeScript 编写 React 组件的前端测试。由于代码来自更有经验的程序员，因此某些数据类型对我来说似乎有点新。现在我有了一个使用“Dispatch<SetStateAction>”作为数据类型定义的道具。我注意到使用 useState-Hook 的 set-property 是有效的，但我不太确定这是否是应该使用 prop 的方式。供参考：该道具称为“onFullScreenClick”。我将非常感谢您对最有可能放入的内容进行解释和示例

Answer 1

如果你看看打字的来源：

type SetStateAction<S> = S | (prevState: S) => S;

type Dispatch<A> = (action: A) => void;

Dispatch将操作作为参数并返回任何有意义的内容 (void)。动作有多种类型，其中之一是SetStateAction。

请记住，它useState可以采用新状态，或者采用先前状态并返回新状态的函数。

SouseState的类型实际上是：

type UseState<S> = (action: S | ((prevState: S) => S)) => void;

Answer 2

这只是告诉 typescript 的一种方式，我们传入的 props 类型

看看这个来自沙箱的简单反例

我们const [num, setnum] = useState(0)在父组件中拥有，并将状态和 setter 函数传递给子组件

的类型num是从 推断出来的useState(0)，如果我们想要 setter 函数的类型，我们只需将鼠标悬停在它上面，我们就会得到

const setNum: Dispatch<SetStateAction<number>>

这Dispatch<SetStateAction<number>>就是 setter 函数的类型。