Блог

Главная - Вопросы по программированию - React/Typescript: this.setState не является функцией

React/Typescript: this.setState не является функцией

#reactjs #typescript #setstate

#reactjs #typescript #setstate

Вопрос:

Я впервые работаю в react typescript.

 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>
    );
  }
}

Когда я нажимаю кнопку отправки, она выдает

 Uncaught TypeError: this.setState is not a function

Комментарии:

1. добавьте this.submit = this.submit.bind(this); в свой конструктор.

2. <Button onClick={() => this.submit}>Send OTP</Button> или public submit = () => { this.setState({ stateval:2 }); }

3. this контекст кнопки — это кнопка. вам необходимо привязать функцию отправки к классу ForgotPassword

4. Независимо от того, вызывает функция bind или использует функции со стрелками.

Ответ №1:

вам нужно привязать свой метод или преобразовать в функциональный, например

 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>
    );
  }
}

я надеюсь, что это полезно

Комментарии:

1. есть ли способ распечатать объект, поскольку JSON.stringify() amp; console.log() не работают в typescript

2. попробуйте сначала напечатать простую строку, console.log(«Привет») если это сработает, console. войдите, все в порядке, это должно работать

3. сработало после добавления правила «no-console»: false в файл tslint.json, спасибо

Ответ №2:

Нет необходимости добавлять метод конструктора или использовать bind. Функция со стрелкой подходит для ваших нужд.

 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>
    );
  }
}

Ответ №3:

Пожалуйста, привяжите вашу функцию отправки к этому :

this.submit = this.submit.bind(это)