2
votes

React / Typescript: this.setState n'est pas une fonction

Je travaille pour la première fois dans react + dactylographié.

Uncaught TypeError: this.setState is not a function

Lorsque je clique sur le bouton d'envoi, il lance

interface IState {
  stateval: number;
}
class Forgotpassword extends React.Component<any, IState> {
  constructor(props: any){
    super(props);
    this.state = { stateval: 1 };
  }
  public submit() {  
    this.setState({ stateval:2 });
  }
  public render() {
    const { stateval} = this.state;
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

reactjs typescript setstate

4 commentaires

ajoutez this.submit = this.submit.bind (this); à votre constructeur.

ou public submit = () => {this.setState ({stateval: 2}); }

le ce contexte du bouton, est le bouton. vous devez lier la fonction de soumission à la classe ForgotPassword

Indique si la fonction de liaison appelle ou utilise des fonctions fléchées.

3 Réponses :

0
votes

Veuillez lier votre fonction d'envoi à ceci:

this.submit = this.submit.bind (this)

0 commentaires

1
votes

Il n'est pas nécessaire d'ajouter la méthode constructeur ou d'utiliser bind. Une fonction de flèche convient à vos besoins.

import React, { Component } from 'react';

interface IState {
  stateval: number;
}

export default class Forgotpassword extends Component<any, IState> {
  state = {
    stateval: 2
  }

  public submit = () => this.setState({ stateval: 2 });

  public render() {
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

0 commentaires

2
votes

vous devez lier votre méthode ou la transformer en fonctionnelle comme

interface IState {
  stateval: number;
}
class Forgotpassword extends React.Component<any, IState> {
  constructor(props: any){
    super(props);
    this.state = { stateval: 1 };
  }
  const submit = () => {  
    this.setState({ stateval:2 });
  }
  const render = () => {
    const { stateval} = this.state;
    return (
      <div className="App">
        <Button onClick={this.submit}>Send OTP</Button>
      </div>
    );
  }
}

j'espère que cela sera utile

3 commentaires

y a-t-il un moyen d'imprimer un objet, car JSON.stringify () & conssole.log () ne fonctionne pas en typographie

essayez d'abord d'imprimer une simple chaîne, console.log ("Salut") si cela fonctionne, console.log c'est ok, ça doit marcher

a fonctionné après l'ajout de la règle "no-console": false dans le fichier tslint.json, merci