React this.state est indéfini ?

Question

Je suis un tutoriel pour débutants de Pluralsight, lors de la soumission d'un formulaire, une valeur est transmise à addUser et j'ai besoin d'envoyer le nom de l'utilisateur à this.state.users mais j'obtiens l'erreur suivante

 App.jsx:14 Uncaught TypeError: Cannot read property 'users' of undefined

Composant

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName)
        })*/
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

export default Component

Answer 1

Dans votre cas, en déclarant votre fonction comme une fonction "fat arrow", vous ajoutez le contexte et supprimez l'obligation de la lier à cette fonction. Cela fonctionne de la même manière que les autres solutions, mais rend les choses beaucoup plus simples à écrire et à lire. Il suffit de changer...

 addUser(userName) { 
    console.log(userName) // correctly gives String
    console.log(this.state) // this is undefined
    console.log(this.state.users) // this is the error
    // and so this code doesn't work
    /*this.setState({
        users: this.state.users.concat(userName)
    })*/
}

à...

addUser = (userName) => { 
    console.log(userName) // correctly gives String
    console.log(this.state) // this is undefined
    console.log(this.state.users) // this is the error
    // and so this code doesn't work
    /*this.setState({
        users: this.state.users.concat(userName)
    })*/
}

Et tout le reste peut rester inchangé.

Answer 2

Un bon modèle consiste à lier une méthode à la classe dans la fonction de construction. Voir https://reactjs.org/docs/handling-events.html

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
  this.addUser = this.addUser.bind(this); 
  //bind functions which need access to "this"v in the constructor here. 

    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName)
        })*/
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

export default Component

Answer 3

Le problème se pose dans ce contexte, il faut donc utiliser

<form onSubmit={(event)=>this.addUser(event)}>
   // Inputs
</form>
addUser(event){
   event.preventDefault()
   // Code this.state 
}

Answer 4

Il suffit d'utiliser async dans la fonction

addUser =async (userName) => { console.log(this.state.users) }

Cela fonctionnera très bien