Reaktion this.state ist undefiniert?

Question

Ich verfolge ein Anfänger-Tutorial von Plural, auf Form Wert einreichen wird addUser Komponente Methode übergeben und ich brauche Benutzername this.state.users zu schieben, aber ich bekomme Fehler

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

Komponente

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

Wenn Sie rufen {this.addUser}, es wird aufgerufen, hier this ist eine Instanz Ihrer Klasse (Komponente), und daher gibt es keinen Fehler für Sie, weil addUser Methode existiert in Ihrer Klasse scope, aber Wenn Sie unter addUser Methode sind, verwenden Sie this, um die state zu aktualisieren, die in den Umfang der Klasse (Komponente) vorhanden sind, aber derzeit sind Sie im Rahmen der addUser Methode und so gibt es einen Fehler wie unter addUser Scope haben Sie nichts wie Zustand, Benutzer usw. So um mit diesem Problem umzugehen, müssen Sie this binden, während Sie addUser Methode aufrufen. So dass Ihre Methode immer die Instanz von this kennt.

Also die letzte Änderung im Code sieht wie folgt aus: -

<Form addUser={this.addUser.bind(this)}/> 

ODER

---

Sie können this im Konstruktor binden, weil es der Ort ist, wenn Sie Dinge, weil Konstruktormethoden intialize sollten werden zuerst aufgerufen, wenn die Komponenten zum DOM rendern.

So kann man es auf diese Weise tun: -

constructor(props) { 
    super(props); 
    this.state = { 
     users: null 
    } 
    this.addUser=this.addUser.bind(this); 
} 

Und jetzt können Sie es in der normalen Art und Weise rufen wie vorher: -

<Form addUser={this.addUser}/> 

ich diese Hoffnung funktionieren wird, und Ich habe es dir klar gemacht.