Правильный способ набрать функцию 'setState' с помощью React hook useState ()

Question

Я работаю с React и машинописью и наткнулся на дилемму. Я использую 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 hook

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>, вы не можете использовать вторую версию.