esta es la primera vez que me enfrento a este mensaje de advertencia.
No se puede llamar a setState en un componente que aún no está montado.
Sigue:
Esto no es operativo, pero podría indicar un error en su aplicación. En su lugar, asigne a
this.statedirectamente o defina unstate = {};propiedad de clase con el estado deseado en el componente MyComponent.
La parte " todavía no montada " en realidad tiene poco o ningún sentido, ya que la única forma de desencadenar el problema es llamar a una función haciendo clic en un botón de un componente que debe montarse para ver el botón. El componente tampoco se desmonta en ningún momento.
Este componente ficticio reproduce el error en mi aplicación:
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> ) } }Estoy usando:
"react": "16.3.2", "react-dom": "16.3.2", "mobx": "4.2.0", "mobx-react": "5.1.2",¿Me perdí algo en la última versión de React/mobx? (tenga en cuenta que el componente no usa nada relacionado con mobx, pero su padre es un observador de mobx-react)
Editar:
Debe haber algo relacionado con la instancia del componente, investigaciones posteriores han demostrado que, en algunos casos, la creación de un controlador dentro de la función de representación hará que esta advertencia desaparezca, pero no en todos los casos.
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> } }Edición 2:
Eliminé 'react-hot-loader/patch' de mis entradas en mi configuración de Webpack y algunos problemas extraños como este desaparecieron. No estoy poniendo esto como respuesta porque el mensaje de error en sí mismo sigue siendo extraño y esto provoca una advertencia en la consola. Aunque todo funciona bien.
Esta advertencia que está recibiendo se debe a que está configurando una referencia al método clickMe en el constructor, que luego usa setState() .
constructor (props) { super(props) this.state = { initial: 'state', some: '' } this.clickMe = this.clickMe.bind(this); <--- This method } clickMe () { this.setState({ some: 'new state' <-- the setState reference that is causing the issue }) }Intente eliminar this.clickMe = this.clickMe.bind(this) del constructor y hágalo en un método de ciclo de vida como componentWillMount() o ComponentDidMount() . Para reaccionar 16 y superior, puede usar el método componentWillMount con el prefijo "SAFE_" . [SAFE_componentWillMount]
componentWillMount() { this.clickMe = this.clickMe.bind(this); } clickMe () { this.setState({ some: 'new state' }) }Simplemente agregue la siguiente línea a su código
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> ); } }Solo necesita usar el método componentDidMount() . Como dice la documentación de React en el ciclo de vida del componente , si necesita cargar datos desde un punto final remoto, este es un buen lugar para instanciar la solicitud de red y puede llamar a setState() inmediatamente en componentDidMount() .
Me gusta esto:
componentDidMount(){ this.clickMe = this.clickMe.bind(this); } clickMe () { this.setState({ some: 'new state' }) }