React this.stateは未定義ですか？

Question

私はPluralsightから初心者チュートリアル以下、フォームに提出した値がaddUserコンポーネントメソッドに渡されていると私はthis.state.usersするためのユーザー名をプッシュする必要があるが、私はときにエラー

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

コンポーネント

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

を取得{this.addUser}と呼ぶと、ここでthisがクラス（コンポーネント）のインスタンスであるため、addUserメソッドがクラスscope、 に存在するため、エラーは発生しません。あなたはaddUser法の下にあるときには、クラスの 範囲（コンポーネント）に存在するstateを更新するthisを使用しているが、現在、あなたはaddUser法の範囲内であり、あなたは何を持っていないaddUser範囲になるように、それはあなたにエラーを与えますユーザーなど addUserメソッドを呼び出す間にこの問題を処理するには、thisをバインドする必要があります。したがって、メソッドが常にthisのインスタンスを知っていることを確認してください。

だからあなたのコードの最後の変更は次のようになります - それはあなたがコンストラクタメソッドので、物事をintializeすべき場所であるため、

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

OR

---

あなたは、コンストラクタで thisをバインドすることができますコンポーネントが DOMにレンダリングされるときに最初に呼び出されます。

ですから、このような方法でそれを行うことができます： -

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

そして、あなたが前に行ったように、今あなたは、通常の方法でそれを呼び出すことができます -

<Form addUser={this.addUser}/> 

私はこれが働くことを願っています、そして、私はあなたにそれを明確にしました。