☰

React this.state は未定義ですか? 質問する

tag-icon • tag-icon reactjs
React this.state は未定義ですか? 質問する

私はPluralsightの初心者向けチュートリアルに従っています。フォームの送信時に値がaddUserコンポーネントメソッドに渡され、userNameをプッシュする必要があるのです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

ベストアンサー1

を呼び出すと{this.addUser}、それが呼び出されます。ここでは、thisクラス (コンポーネント) のインスタンスです。addUserメソッド はクラス内に存在するため、エラーは発生しませんscope。しかし、メソッド の下にあるときは、クラス (コンポーネント) のスコープ内に存在する を更新するためにaddUserを使用していますが、現在はメソッド のスコープ内にあるため、スコープの下には状態やユーザーなどが何もないため、エラーが発生します。したがって、この問題に対処するには、メソッドを呼び出している間にバインドする必要があります。これにより、メソッドは常に のインスタンスを認識するようになります。thisstateaddUseraddUserthisaddUserthis

したがって、コードの最終的な変更は次のようになります。

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

または

this コンポーネントが にレンダリングされるときにコンストラクター メソッドが最初に呼び出されるため、コンストラクターは初期化を行う必要がある場所であるため、コンストラクター内で バインドできます DOM 。

したがって、次のように実行できます:-

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

そして、以前と同じように通常の方法で呼び出すことができます:-

<Form addUser={this.addUser}/>

これがうまくいくことを望みます、そして私はあなたにそれを明確に伝えました。

おすすめ記事