这是我第一次面对这个警告信息。
无法在尚未安装的组件上调用 setState。
如下:
这是一个空操作,但它可能表明您的应用程序中存在错误。相反,在 MyComponent 组件中
this.state
直接分配或定义state = {};
具有所需状态的类属性。
“尚未安装”部分实际上几乎没有任何意义,因为触发该问题的唯一方法是通过单击需要安装的组件中的按钮来调用函数以查看该按钮。该组件也不会在任何给定时间卸载。
这个虚拟组件重现了我的应用程序中的错误:
import PropTypes from 'prop-types'
import React from 'react'
export default class MyComponent extends React.Component {
constructor (props) {
super(props)
this.state = {
initial: 'state'
}
this.clickMe = this.clickMe.bind(this)
}
clickMe () {
this.setState({
some: 'new state'
})
}
render () {
return (
<div>
<button onClick={this.clickMe}>click</button>
</div>
)
}
}
我在用:
"react": "16.3.2",
"react-dom": "16.3.2",
"mobx": "4.2.0",
"mobx-react": "5.1.2",
我是否错过了最新的 React/mobx 版本中的某些内容?(注意该组件不使用任何与 mobx 相关的东西,但它的父级是一个 mobx-react 观察者)
编辑:
肯定有与组件实例相关的东西,进一步调查表明,在某些情况下,在渲染函数内创建处理程序会使此警告消失,但并非在所有情况下。
class MyComponent extends React.component {
constructor (props) {
// ...
this.clickMeBound = this.clickMe.bind(this)
}
clickMe () {
...
}
render () {
// works
<button onClick={() => {this.clickMe()}}>click arrow in render</button>
// warning: Can't call setState on a component that is not yet mounted.
<button onClick={this.clickMeBound}>click bound</button>
}
}
编辑2:
我已经从我的 Webpack 配置中的条目中删除了“react-hot-loader/patch”,并且一些像这样的奇怪问题已经消失了。我没有把它作为答案,因为错误消息本身仍然很奇怪,这会导致控制台中出现警告。不过一切正常。