this.setState est indéfini

Je continue à voir des réponses qui disent à utiliser => ou .bind (), mais aucune de ces solutions travaillé.

import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default class MyWeatherApp extends Component {
  constructor(props) {
  super(props);

  this.state = {};
}

getInitialState() {
  return {
    zip: '',
    forecast: null,
  };
}

_handleTextChange(event) {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
}

Solution:

_handleTextChange = (event) => {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
  alert('click');
}

source d'informationauteur nathanengineer

  1. 34

    Lorsque vous extend React.Component avec ES2015 classe syntaxe vous devez lier votre action des gestionnaires d'un contexte de votre classe.

    Essayez ceci: onChange={e => _handleTextChange(e)}

    Généralement, il est préférable de ne pas utiliser la flèche fonctions ou bind méthodes à l'intérieur de render car il génère une nouvelle copie de la fonction sur n'importe quel render appel. Déplacer déclaration de fonction à la class constructor.

    Personnellement, je préfère utiliser la flèche fonctions comme des propriétés de la classe dans ce cas

    class MyClass extends React.Component {

  handleClick = () => {
    //your logic
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

    Ce n'est pas une partie de ES2015 spécification, mais babel stade-0 preset prend en charge cette syntaxe

    Vous pouvez en lire plus sur le contexte de liaison à Réagir dans cet article

  2. 8

    Me laisser écrire cela en détail. Comme j'ai dû perdre beaucoup de temps dans la recherche & je ne veux pas que quiconque de répéter ce...

    Si vous n'avez pas de Flèche de la Fonction vous avez pour lier this comme Ligne '9'

    class MyClass extends React.Component {

  handleButtonClick(){
    console.log("Hello from here");
  };

  render() {
    return (
      <button onClick={this.handleButtonClick.bind(this)}>Click me</button>
    );
  }
}

    Un autre moyen est d'utiliser ES6 Flèche de la fonction. Vous avez besoin de ne pas lier " il " dans ce cas. L'installation de "babel étape-1 preset" le permettra.

    Exécutez la commande ci-dessous dans votre projet:

    npm i babel-preset-stage-1 --save

    Votre .babelrc ressemblera à ceci. Spécialement "-1 " dans le preset.

    {
  "presets": ["es2015", "react", "stage-1"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

    Votre composant sera comme ceci, comme je l'ai dit: 

    class MyClass extends React.Component {

      handleButtonClick = () => {
        console.log("Hello from here");
      };

      render() {
        return (
          <button onClick={this.handleButtonClick}>Click me</button>
        );
      }
    }
  3. 0

    vous pouvez également lier ce dans constructor comme ce 

    class MyClass extends React.Component {
  constructor(props){
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
 }
  handleButtonClick(){
    console.log("Hello from here");
  }

  render() {
    return (
      <button onClick={this.handleButtonClick}>Click me</button>
    );
  }
}
  4. 0

    Aucune de ces réponses œuvres. J'ai essayé toutes les options et j'ai toujours l'erreur undefined. Réagir changements trop vite.

  5. 0

    Le problème était le suivant: j'ai eu que ERREUR: ce.setState n'est pas une fonction

    Donné que je lie ma fonction à l'état d'un composant constructeur, comme ceci:

     this.getRequestData = this.getRequestData.bind(this);

    et ma fonction est:

    getRequestData(){
    axios.post('http://example.com/getInfo', jsonData)
                        .then(function (res) {
                            console.log(res);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        this.setState({ stateVaribale });
                    })
}

    la solution est d'utiliser arrow functions au lieu d'utiliser keywordfonction de l'axios demande, parce que c'est source de confusion pour réagir aux reportez-vous à la fonction dans axios demande au lieu de la état des composants.

    getRequestData(){
axios.post('http://example.com/getInfo', jsonData)
                        .then(res => {
                        console.log(res);
                        })
                        .catch(error => {
                            console.log(error);
                        });
                        this.setState({ stateVaribale });
                    })}