Question

从'react'导入React，{组件}

类列扩展了组件{ 构造函数（道具）{ 超级（道具）

    this.state={
        message:'Hello'
    }
}

changeMessage(){
    
     this.setState=({
         message:'Welcome'
    })
}

render(){
    return(
        <div>
            <div>{this.state.message}</div>
            <button onClick={this.changeMessage}>Click</button>
        </div>
    )
}

} 导出默认列

Answer 1

正如ray hatfield所说，您正在丢失this上下文，需要使用箭头功能，但是您没有调用setState；您要覆盖它。

从{p>中删除=

this.setState=({
     message:'Welcome'
})

说：

this.setState({
    message:'Welcome'
})

Answer 2

因为将其传递为this.changeMessage会将其与组件范围分离。当按钮调用它时，“ this”不再是组件。

将其更改为箭头功能：() => this.changeMessage()

如果您需要详细信息，我过去曾尝试在another answer中解释此范围问题。

另外，像Aaron points out一样，您的changeMessage处理程序中还有一个多余的=。

为什么即使编写了setState方法也无法更新我的状态？

2 个答案: