反应 this.state 是未定义的? [英] React this.state is undefined?

问题描述

我正在学习 Pluralsight 的初学者教程，在表单提交时，一个值被传递给 addUser 组件方法，我需要将 userName 推送到 this.state.users 但是我收到错误

 App.jsx:14 Uncaught TypeError:无法读取未定义的属性用户"

组件

从 'react' 导入 React从用户"导入用户从表单"导入表单类组件扩展 React.Component {构造函数(){极好的()this.state = {用户:空}}//这是在不同组件中的表单提交时触发的添加用户(用户名){console.log(userName)//正确给出字符串console.log(this.state)//这是未定义的console.log(this.state.users)//这是错误//所以这段代码不起作用/*this.setState({用户:this.state.users.concat(userName)})*/}使成为() {返回 (<div><表单 addUser={this.addUser}/>

)}}导出默认组件

解决方案

当你调用 {this.addUser} 时，它被调用，这里 this 是一个实例您的类(组件)，因此它不会给您任何错误，因为 addUser 方法确实存在于您的类 scope 中，但是当您使用 addUser 方法时，您正在使用 this 更新存在于中的 state类(组件)的范围，但目前您在 addUser 方法的范围内，因此它会给您一个错误，如在 addUser 范围内，您没有任何类似状态，用户等等.所以为了解决这个问题，你需要在调用addUser方法时绑定this.这样你的方法就知道this的实例.

所以你的代码中的最终更改将如下所示:-

或

---

您可以在构造函数中绑定 this，因为它是您应该初始化事物的地方，因为当组件渲染到 DOM 时，首先调用构造函数方法.

所以你可以这样做:-

 构造函数(道具){超级(道具)；this.state = {用户:空}this.addUser=this.addUser.bind(this);}

现在您可以像以前一样以正常方式调用它:-

我希望这会奏效，而且我已经向你明确说明了.

I am following a beginner tutorial from Pluralsight, on form submit a value is passed to addUser component method and I need to push userName to this.state.users but I get error

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

Component

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

解决方案

When you call {this.addUser} , it gets called, here this is an instance of your class(component), and thus it gives no error to you because addUser method does exist in your class scope, but when you are under addUser method you are using this to update the state which exist in the scope of class(component), but currently you are within the scope of addUser method and so it gives you an error as under addUser Scope you got nothing like state, user etc. So to deal with this problem you need to bind this while you are calling addUser method.So that your method always knows the instance of this.

So the final change in your code will look like this:-

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

OR

---

You can bind this in the constructor,because it is the place when you should intialize things because constructor methods are called first when the components render to the DOM.

So you can do it in this way:-

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

And now you can call it in normal way as you did before:-

<Form addUser={this.addUser}/>

I hope this will work,And I made it clear to You.

这篇关于反应 this.state 是未定义的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！