无法在尚未安装的组件上调用setState [英] Can't call setState on a component that is not yet mounted

问题描述

这是我第一次遇到此警告消息.

this is the first time I face this warning message.

无法在尚未安装的组件上调用setState.

Can't call setState on a component that is not yet mounted.

关注:

这是一个禁忌，但它可能表明您的应用程序中存在错误.而是直接分配给this.state或在MyComponent组件中使用所需状态定义state = {};类属性.

This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the MyComponent component.

" 尚未安装 "部分实际上没有任何意义，因为触发问题的唯一方法是通过单击组件中的按钮来调用函数需要安装才能看到该按钮.在任何给定时间都不会卸载该组件.

The "not yet mounted" part actually makes little to no sense as the only way to trigger the issue is to call a function by clicking a button from a component that needs to be mounted in order to see the button. The component is not unmounted at any given time neither.

此虚拟组件会在我的应用中重现该错误:

This dummy component reproduces the error in my app:

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反应的观察者)

Did I miss something in the latest React/mobx version? (note the component does not use any mobx related stuff but its parent is a mobx-react observer)

必须与组件实例有关，进一步的研究表明，在某些情况下，在render函数中创建处理程序会使此警告消失，但并非在所有情况下都如此.

There must be something related to the component instance, further investigation has shown that in some cases, creating an handler inside the render function will make this warning disappear, but not in all cases.

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

我从我的Webpack配置中的条目中删除了"react-hot-loader/patch"，并且像这样的一些奇怪的问题也消失了.我不会将其作为答案，因为错误消息本身仍然很奇怪，并且这会在控制台中引起警告.一切都很好.

I have removed 'react-hot-loader/patch' from my entries in my Webpack config and some weird issues like this one have disappeared. I'm not putting this as an answer because the error message itself is still weird and this causes a warning in the console. Everything works fine though.

推荐答案

只需将以下行添加到您的 代码

Just add following line to your code

export default class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
       initial: 'state',
       some: ''          // <-------  THIS LINE
    }
   this.clickMe = this.clickMe.bind(this)
  }

 clickMe () {
   this.setState({
     some: 'new state'
   })
  }

 render () {
   return (
     <div>
       <button onClick={this.clickMe}>click</button>
     </div>
   );
  }
}

这篇关于无法在尚未安装的组件上调用setState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！