反应 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 是您的类（组件）的一个实例，因此它不会给您任何错误，因为您的类 scope 中确实存在 addUser 方法， 但是当您使用addUser 方法时，您正在使用this 更新存在于中的state 类（组件）的范围，但目前您在addUser 方法的范围内，因此它会给您一个错误，因为在addUser 范围内您没有任何状态、用户等。 所以要处理这个问题，你需要在调用addUser方法的时候绑定this。这样你的方法总是知道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

Answer 4

我遇到了同样的问题，但我的问题是在 this.state = { ... } 调用完成之前尝试访问 this.state。正在做类似this.state = { ...this.function1() } 和function1 = () => { a: this.state.b } 的事情。希望这可以帮助某人

Answer 5

在您的情况下，通过将函数声明为胖箭头函数，您可以添加上下文并删除绑定到 this 的要求。这与其他解决方案的工作原理相同，但使写入和读取都变得更加简单。换一个吧……

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

到...

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

其他一切都可以保持不变。

Answer 6

我认为其他答案不能很好地解释这一点。基本上问题在于 Javascript 的 this 关键字很疯狂（MDN 非常慷慨地表示它 "behaves a little differently in JavaScript compared to other languages"）。

TL;DR 是 this 不一定是定义该方法的类。当您在 <Form> 元素中使用 this.addUser 时，this 实际上是 Form 对象！我不确定 React 为什么会这样做——我真的不知道为什么会有人想要这样做，但很容易验证。只需将console.log(this) 放入addUser，您就会发现它是Form 的一个实例。

无论如何，解决方案非常简单 - 使用箭头函数。箭头函数在定义它们的位置复制this。因此，如果您按照其他人的建议将一个放入您的渲染函数中：

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

然后当render() 运行时，this 将引用Component 对象，箭头函数将对其进行复制，然后在运行时将使用该副本。它基本上是这段代码的简写（这是人们在箭头函数之前所做的）：

    render() {
        const that = this; // Make a copy of this.
        return (
            <div>
            <Form addUser={function() { return that.addUser; }}/>
            </div>
            )
    }

另外，正如其他人所提到的，每次调用渲染函数时创建一个新函数可能会影响性能，因此最好在其他地方捕获一次this。我认为这是比其他人建议的更好的方法：

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser = (userName) => { 
        this.setState({
            users: this.state.users.concat(userName)
        })
    }
    render() {
        return (
            <div>
            <Form addUser={this.addUser}/>
            </div>
            )
    }
}

但这是我使用 React 的第一天，我通常会尽量避免使用像 Javascript 那样完全吠叫的语言，所以请谨慎对待所有这些！

Answer 7

一个好的模式是在构造函数中将方法绑定到类。 看 https://reactjs.org/docs/handling-events.html

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
  this.addUser = this.addUser.bind(this); 
  //bind functions which need access to "this"v in the constructor here. 

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

问题就在这个上下文中，所以使用

<form onSubmit={(event)=>this.addUser(event)}>
   // Inputs
</form>
addUser(event){
   event.preventDefault()
   // Code this.state 
}

Answer 9

在函数中简单地使用异步

addUser =async (userName) => { console.log(this.state.users) }

这会很好用