使用React hook useState（）

Question

我正在使用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挂钩函数的正确/官方方式吗？

Answer 1

根据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>，就不能使用第二个版本。