Je ne peux pas définir un état avec un nom de clé dynamique dans le script de type.

Question

J'ai défini l'interface d'état du composant React comme suit.

interface IState {
    email: string,
    password: string,
    errors: object
}

et dans l'événement de changement d'entrée de texte, j'essaie de définir l'état avec la clé dynamique comme ci-dessous.

handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {

        this.setState({
            [e.target.name]: e.target.value
        });
    }

Cependant, VSCode me montre cette erreur

Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'IState | ((prevState: Readonly<IState>, props: Readonly<{}>) => IState | Pick<IState, "email" | "password" | "errors"> | null) | Pick<IState, "email" | "password" | "errors"> | null'.
  Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<IState, "email" | "password" | "errors">': email, password, errorsts(2345)

Tout conseil serait le bienvenu.

Answer 1

Le problème est que e.target.name devrait être la clé de IState y e.target.value doit être de type relatif à partir de la clé dans IState Pour résoudre ce problème, vous pouvez lancer manuellement le type comme suit

this.setState({
            [e.target.name]: e.target.value
    } as Pick<IState, keyof IState>);

mais cela désactive le typecript pour cette fonction. Vous pouvez aussi le caster vers n'importe quel type, mais ce n'est pas sûr.

On dirait que este Cette réponse peut également vous être utile

La meilleure option est d'utiliser ReduxForm

Answer 2

On peut aussi faire quelque chose comme ça :

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const name = e.target.name as keyof typeof this.state;

    this.setState({ ...this.state, [name]: e.target.value });
  };