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

IT技术 reactjs typescript react-hooks
2021-05-07 12:28:18

我无法弄清楚如何键入useState函数，因为它返回一个元组。本质上，我必须null为emailie提供初始值，假设我不能在这里使用空字符串。

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

理想情况下，我想输入 my，useState因此如果可能，它希望电子邮件为字符串或空值。目前它只继承它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>
}

为setEmail函数返回以下错误，因为string在函数参数中null指定的类型无效useState()

[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;
}
3个回答

目前，TypeScript 编译器认为email和passwordare的类型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>
}

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

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>();

您可以使用 TS 映射类型来提高可读性，并且更喜欢 undefined 而非空值

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>
}
其它你可能感兴趣的问题
上一篇耐臭氧灯丝 下一篇PLA对口罩安全吗？