如何在 React 中正确使用 useState 钩子和 typescript？

Posted 2023-02-14

【中文标题】如何在 React 中正确使用 useState 钩子和 typescript？

【英文标题】：How to use useState hook in React with typescript correctly?

【发布时间】：2021-05-05 15:32:08

【问题描述】：

我正在尝试制作一个登录表单来响应打字稿。但是 setEmail 方法不接受值。它说“字符串”类型的参数不能分配给“SetStateAction”类型的参数。我该怎么解决？

【问题讨论】：

您需要在上面的钩子中添加一个默认的字符串值。 [email,setEmail] = useState('')

另见：Set types on useState React Hook with TypeScript

【参考方案1】：

如果没有任何初始参数，email 和 setEmail 的类型将是未定义的。

const [email, setEmail]: [undefined, (value: ((prevState: undefined) => undefined) | undefined) => void] = useState();

所以第一步是通过使用useState("") 甚至更好的useState<string>("") 来强制电子邮件为字符串。

【参考方案2】：

用空字符串初始化useState即可解决。

useState 可以根据你的 initialState 推断类型，这就是为什么用空字符串初始化会解决你的情况。

没有 initialState 的 useState 将是未定义的，因此您的类型和状态是未定义的。

如果您希望您的状态具有更复杂的类型，则需要传递具有定义类型的 initialState：

const initialState: TYPE = 
  // ...
;
const [state, setState] = useState(initialState);

或

将类型传递给 useState 而不将类型设置为 initialState，例如：useState<TYPE>(initialState);

【参考方案3】：

你可以为它设置一个字符串类型

显式方式：

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

或 隐式方式：

const [email, setEmail] = useState('')

或者如果你想设置数字类型

const [inputNumber, setInputNumber] = useState<number>(0);

然后在jsx，这样做

<input
  type="number"
  value=inputNumber
  onChange=(val) => 
    //Some ways to do this
    setInputNumber(Number(val.target.value));
    setInputNumber(+val.target.value);
    setInputNumber(parseInt(val.target.value,0));
  
/>

see more examples

【参考方案4】：

你只需要在这种情况下使用泛型和useState hook

简单案例

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

复杂案例

声明一个接口

     interface IUser
        email:string
        

使useState 通用

     const [email, setEmail] = useState<IUser>(email: '')

你可以看到DefinitelyTyped