反应this.state未定义？

Question

我正在关注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

Answer 1

当你调用{this.addUser}它时,它会被调用,这里this是你的类(组件)的一个实例,因此它不会给你带来任何错误,因为addUser你的类中存在方法scope,但是当你在addUser方法下时,你this用来更新state存在于类(组件)的范围,但目前你在addUser方法的范围内,所以它给你一个错误,因为在addUser你没有像状态,用户等任何东西.所以要处理这个问题你需要绑定,this而你在调用addUser因此,您的方法始终知道实例this.

因此,代码的最终更改将如下所示: -

<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}/>

我希望这会奏效,我向你明确表示.

Answer 2

@Vinit Raj的方法非常有效 - 我更喜欢使用箭头函数语法.

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

使用这样的匿名函数,您无需将其绑定到任何位置.

Answer 3

如果您更喜欢使用箭头函数，请执行此操作。箭头函数语法如下

addUser = event => { 
    const { value }  = event.target;
    console.log("value", value);
}

为了防止在每次渲染或重新渲染时调用此函数，您需要

改变

<Form addUser={this.addUser}/>

到

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

这样 addUser 只会在事件发生/触发时被调用