web-dev-qa-db-fra.com

Le type 'void' n'est pas assignable à type '((event: MouseEvent <HTMLInputElement>) => void) | indéfini'

   import * as React from "react";
   import "./App.css";
   import PageTwo from "./components/PageTwo";

    export interface IPropsk {
        data?: Array<Items>;
        fetchData?(value: string): void;
    }

    export interface IState {
       isLoaded: boolean;
       hits: Array<Items>;
       value: string;
    }
    class App extends React.Component<IPropsk, IState> {
        constructor(props: IPropsk) {
        super(props);

        this.state = {
        isLoaded: false,
        hits: [],
        value: ""
        this.handleChange = this.handleChange.bind(this);
  }   

  fetchData = val => {
        alert(val);
  };

  handleChange(event) {
       this.setState({ value: event.target.value });
  }


  render() {
   return (
      <div>
        <div>
           <input type="text" value={this.state.value} onChange= {this.handleChange}
           <input type="button" onClick={this.fetchData("dfd")} value="Search" />
      </div>
     </div> 

    );

  }
}

 export default App;

Dans l'exemple de code ci-dessus, j'ai essayé d'appeler une méthode (fetchData) en cliquant sur le bouton avec un paramètre. Mais je donne une erreur de la ligne suivante

 <input type="button" onClick={this.fetchData("dfd")} value="Search" />

L'erreur est

Le type 'void' n'est pas assignable à type '((event: MouseEvent) => void) | non défini '.

javascriptreactjstypescript
20
Chameera Ashanth

Dans votre code this.fetchData("dfd"), vous appelez la fonction. La fonction retourne void. void n'est pas assignable à onClick qui attend une fonction.

Réparer

Créez une nouvelle fonction qui appelle fetchData, par exemple. onClick={() => this.fetchData("dfd")}.

Plus

C'est une erreur très courante évitée par TypeScript ????

34
basarat

Vous pouvez aussi faire quelque chose comme

fetchData = (val: string) => (event: any) => {
  alert(val);
};

Vous pouvez également définir un type pour votre event, tel que React.MouseEvent. Vous pouvez en lire plus à ce sujet ici .

6
JazzBrotha

Avec les composants fonctionnels, nous utilisons React.MouseEvent et cela clarifie les choses ...

const clickHandler = () => {
  return (event: React.MouseEvent) => {
    ...do stuff...
    event.preventDefault();
  }
}
5
beauXjames

Vous pouvez simplement définir le type de cette façon et vous n'obtiendrez aucune erreur

export interface IPropsk {
    data?: Array<Items>;
    fetchData?(): (value: string) => void;
}
0
Dmitry Petrov