在 React 中设置状态为先前状态时如何修复打字稿错误？

Question

我定义了这个状态

const [userInfo, setUserInfo] = React.useState<UserInfo | undefined>()

在我的 useEffect 中的某个地方，我尝试根据以前的状态设置它。

所以这样做

setUserInfo(
                          (prevState) => {
                          return {
                              ...prevState,
                              ...someRef.current
                          }
                      })

但是失败并出现以下错误

Type error: Argument of type '(prevState: any) => any' is not assignable to parameter of type 'UserInfo'.
  Type '(prevState: any) => any' is missing the following properties from type 'UserInfo': name, age, gender

更奇怪的是我更新了代码以返回之前的状态。基本上就是这个

setUserInfo((prevState) => return prevState)

此操作失败并出现相同的错误！

Type error: Argument of type '(prevState: any) => any' is not assignable to parameter of type 'UserInfo'.
  Type '(prevState: any) => any' is missing the following properties from type 'UserInfo': name, age, gender

我真诚地认为这会起作用。我正在获取之前的状态并将其返回，但这无法编译。

如果我禁用检查并运行应用程序，它会按预期工作，因此这看起来像打字稿问题。

关于如何解决这个问题有什么想法吗？

Answer 1

您可以将返回值转换为 UserInfo。

setUserInfo(
  (prevState) => {
    return {
      ...prevState,
      ...someRef.current
    } as UserInfo;
  }
);