React this.state undefined? Bir değer göndermek formdaki ben Pluralsight gelen bir acemi öğretici takip ediyorum

Question

, addUser bileşenli yönteme geçirilen ve ben this.state.users için userName itmek gerekir ama hatayı

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

Bileşen

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

zaman olsun {this.addUser}'u çağırırsınız, burada çağrılır, burada this, sınıfınızın (bileşeninin) bir örneğidir ve bu nedenle scope, scope, sınıfınızda addUser yönteminin varlığından dolayı hiçbir hata vermezsiniz, ancak addUser yönteminin altında olduğunuzda, sınıfının (bileşen) kapsamındaki state sürümünü güncelleştirmek için this yöntemini kullanıyorsunuz, ancak şu anda addUser yönteminin kapsamındasınız ve bu nedenle addUser Kapsamı altında bir hata veriyorsunuz. Bu sorunu çözmek için addUser yöntemini çağırırken this bağlamanız gerekir. Yönteminizin her zaman this örneğini bildiği anlamına gelir.

Yani kodunuzda son değişiklik aşağıdaki gibi görünecektir: -

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

VEYA

---

Eğer yapıcı yöntemlerinden dolayı şeyler başlatılamadığı gereken yerdir, çünkü yapıcısındaki this bağlayabilir Bileşenler, DOM'a işlendiğinde ilk çağrılır.

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

Ve daha önce yaptığı gibi şimdi normal şekilde diyebilirsiniz: - -:

Yani bu şekilde yapabiliriz

Bu çalışır umut

<Form addUser={this.addUser}/> 

, Ve Bunu sana açık yaptım.