Comment corriger une erreur dactylographiée lors de la définition de l'état sur l'état précédent dans React ?

Question

J'ai défini ce statut

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

Quelque part dans mon useEffect, j'essaie de le définir en fonction de l'état précédent.

Alors fais ça

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

Mais il échoue avec l'erreur suivante

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

Ce qui est encore plus bizarre, c'est que j'ai mis à jour le code pour revenir à l'état précédent. En gros, c'est ça

setUserInfo((prevState) => return prevState)

Cette opération échoue avec la même erreur !

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

Je pense honnêtement que cela fonctionnera. J'obtiens l'état précédent et je le renvoie, mais cela ne se compile pas.

Si je désactive la vérification et exécute l'application, cela fonctionne comme prévu, cela ressemble donc à un problème de dactylographie.

Des idées sur la façon de résoudre ce problème ?

Answer 1

Vous pouvez convertir la valeur de retour en UserInfo.

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