在 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;
  }
);