时间戳

首页 > 解决方案 > 使用 React 钩子 useState() 键入“setState”函数的正确方法

reactjs - 使用 React 钩子 useState() 键入“setState”函数的正确方法

问题描述

我正在使用 React 和 typescript，只是偶然发现了一个困境。我使用React.useState()钩子来管理我的状态，如下所示：

const [currentUser, setCurrentUser] = React.useState({} as User)  // currentUser is of type User

我找到了这种输入setCurrentUser函数的方法：

setCurrentUser: React.Dispatch<React.SetStateAction<User>>

因此，如果我尝试将此函数与字符串等无效参数一起使用，则会收到此错误：

Argument of type '"dummy string"' is not assignable to parameter of type 'SetStateAction<User>'

然后我找到了一个更简单的方法：

setCurrentUser: React.Dispatch<User>

通过这种方式，错误消息也更容易阅读：

Argument of type '"dummy string"' is not assignable to parameter of type 'User'

那么女巫是输入这个setState钩子函数的正确/官方方法吗？

标签： reactjstypescriptreact-hooks

解决方案

根据 React 定义：

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

在您的示例中：

React.Dispatch<React.SetStateAction<User>> =
| React.Dispatch<User>
| React.Dispatch<(prevState: User) => User>;

这意味着您可以这样做：

setUser({ name: 'UserName'});

或者使用以前的值：

setUser(previousUser => {
  return {
    ...previousUser,
    surname: 'UserSurname'
  }
});

通过将调度声明为setUser: React.Dispatch<User>，您不能使用第二个版本。

推荐阅读