reactjs - 使用 React hook 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 鉤子函數呢？

答案＃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'
  }
});

通過將 dispatch 宣告為 setUser: React.Dispatch<User>，你就無法使用第二個版本。