使用 React 的 useState 钩子时键入可为空状态的正确方法

Question

我很难弄清楚如何键入useState函数，因为它返回一个元组。本质上，我必须提供null作为email的初始值，也就是说，假设我不能在这里使用空字符串。

然后我有setEmail函数来更新这个状态值，它将电子邮件作为字符串。

理想情况下，我想键入我的useState，因此如果可能的话，它希望电子邮件是字符串或null。目前它只继承了null

import * as React from "react";
const { useState } = React;
function Example() {
const [state, setState] = useState({ email: null, password: null });
function setEmail(email: string) {
setState(prevState => ({ ...prevState, email }))
}
return <p>{state.email}</p>
}

由于函数参数中的string不是useState()中指定的null的有效类型，因此setEmail函数返回以下错误

[ts]
Argument of type '(prevState: { email: null; password: null; }) => { email: string; password: null; }' is not assignable to parameter of type 'SetStateAction<{ email: null; password: null; }>'.
Type '(prevState: { email: null; password: null; }) => { email: string; password: null; }' is not assignable to type '(prevState: { email: null; password: null; }) => { email: null; password: null; }'.
Type '{ email: string; password: null; }' is not assignable to type '{ email: null; password: null; }'.
Types of property 'email' are incompatible.
Type 'string' is not assignable to type 'null'. [2345]
(parameter) prevState: {
email: null;
password: null;
}

Answer 1

当前，TypeScript编译器认为email和password的类型是null(没有其他值(。您可以通过向useState调用提供显式类型参数来解决此问题，从而使email和password的类型已知为string或null。

const { useState } = React;
function Example() {
const [state, setState] = useState<{email: null | string, password: null | string}>({ email: null, password: null });
function setEmail(email: string) {
setState(prevState => ({ ...prevState, email }))
}
return <p>{state.email}</p>
}

Answer 2

这已经在几个地方得到了解决：

https://dev.to/busypeoples/notes-on-typescript-react-hooks-28j2

https://codewithstyle.info/Using-React-useState-hook-with-TypeScript/

TLDR：当初始状态为空时，将类型参数传递给setState

例如：

const [email, setEmail] = useState<string>();

Answer 3

您可以使用TS映射类型来提高可读性，并且更喜欢未定义的值而不是空值

const { useState } = React;
function Example() {
const [state, setState] = useState<Partial<{email: string, password: string}>>();
function setEmail(email: string) {
setState(prevState => ({ ...prevState, email }))
}
return <p>{state.email | ""}</p>
}