对此作出反应，国家是不确定的？

当您调用 {this.addUser}时，它会被调用，这里的 this是您的类(组件)的一个实例，因此它不会给您任何错误，因为 addUser方法确实存在于您的类 scope中, 但是当你使用 addUser方法时，你使用的是 this来更新 state 类(组件)的作用域，但是当前你在 addUser方法的作用域内，所以它会给你一个错误，因为在 addUser作用域中你得到的不像状态、用户等。 因此，为了处理这个问题，需要在调用 addUser method 时绑定 this，这样您的方法总是知道 this的实例。

所以代码的最后更改如下所示:-

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

或者

所以你可以这样做:-

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

现在你可以像以前一样用正常的方式称呼它:-

<Form addUser={this.addUser}/>

我希望这能成功，我已经跟你说得很清楚了。

@ Vinit Raj 的方法非常好用——尽管我更喜欢这样使用箭头函数语法。

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

使用这样的匿名函数，您不需要在任何地方绑定它。

如果你喜欢使用箭头函数这样做。箭头函数语法如下

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

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

改变

<Form addUser={this.addUser}/>

敬

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

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

我也有同样的问题，但是我的问题是在 this.state = { ... }调用结束之前尝试访问 this. state。正在做类似 this.state = { ...this.function1() }和 function1 = () => { a: this.state.b }的动作。希望这对谁有帮助

在您的例子中，通过将函数声明为胖箭头函数，您可以添加上下文并删除绑定到这个函数的要求。这和其他解决方案的工作原理一样，但是使得写和读都更加简单。只要改变..。

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

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

在函数中简单地使用异步

AddUser (用户名) = > { Log (this.state.users) }

这样就行了

我不认为其他答案能很好地解释这个问题。基本上问题在于 Javascript 的 this关键字是疯狂的(MDN 非常慷慨地说它是 “与其他语言相比，JavaScript 的表现稍有不同”)。

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 那样完全令人讨厌的语言，所以对这一切都持保留态度！

一个好的模式是将方法绑定到构造函数中的类。 你看 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

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

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