Parece que la llamada setState se está escribiendo en el lugar equivocado. Asegúrate de que esté en el objeto editTodo :

 handleChange = (event) => { this.setState(state => ({ editTodo: { ...state.editTodo, title: event.target.value, }, })); }

En index.js cambie <React.StrictMode><App /><React.StrictMode> a <App /> y no verá esta advertencia. Tenga en cuenta que el modo estricto le ayuda con

• Identificación de componentes con ciclos de vida inseguros
• Advertencia sobre el uso de la API de referencia de cadena heredada
• Advertencia sobre el uso obsoleto de findDOMNode
• Detección de efectos secundarios inesperados
• Detección de la API de contexto heredada

Consulte https://reactjs.org/docs/strict-mode.html antes de eliminarlo.

La respuesta de @Ross Allen no está relacionada con el problema básico (la advertencia), resolvió un problema de sintaxis en el código.

La respuesta de @Ali Rehman está más relacionada con la advertencia, pero también no resuelve correctamente el problema, solo oculta el problema para que la advertencia no aparezca más.. ¿Por qué no si no nos importan las desaprobaciones?

Sí, el problema proviene de React.StrictMode:

 <React.StrictMode> <App /> </React.StrictMode>

StrictMode es una herramienta para resaltar problemas potenciales en una aplicación. Activa chequeos y advertencias adicionales para sus descendientes, tales como:

• Identificación de componentes con ciclos de vida inseguros
• Advertencia sobre el uso de la API de referencia de cadena heredada
• Advertencia sobre el uso obsoleto de findDOMNode
• Detección de efectos secundarios inesperados
• Detección de la API de contexto heredada

Como el seguimiento del error no se proporciona completamente en la pregunta, supongo que el problema está relacionado con una Advertencia sobre el uso obsoleto de findDOMNode , debido a la referencia a elementos en los métodos de representación:

 <Modal show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Edit your Task!</Modal.Title> </Modal.Header> <Modal.Body > <FormGroup > <Form.Control type="text" value={this.state.editTodo.title} onChange={this.handleChange} /> </FormGroup> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={this.handleClose}> Close </Button> <Button variant="primary" onClick={this.handleClose}> Save Changes </Button> </Modal.Footer> </Modal>

Cuando se renderiza el componente, entonces el modal también se ha renderizado, y tratamos de cambiar los estados del componente, el componente (y por lo tanto el modal) se volverá a renderizar, y en esta etapa el modal no puede tener acceso a los estados. .

La solución para resolver la advertencia es usar React refs . Refs ayuda a acceder a los nodos DOM o elementos React creados en el método de renderizado.

Si está utilizando un modal o un carrusel de react-bootstrap una solución alternativa es deshabilitar las animaciones . Apagarlos hace que la advertencia desaparezca.

Para modales:

 <Modal animation={false}> <Modal.Header closeButton> <Modal.Title>Title</Modal.Title> </Modal.Header> <Modal.Body> Content </Modal.Body> </Modal>

Para carruseles:

 <Carousel slide={false} fade={false}> <Carousel.Item> Scene 1 </Carousel.Item> <Carousel.Item> Scene 2 </Carousel.Item> </Carousel>

Sé que encajaría mejor como comentario una vez que no responda la pregunta OP, pero no tengo la reputación suficiente para hacerlo y tal vez ayude a alguien.

EDITAR : Esto se solucionó en v2 alpha

La solución más simple para este tipo de escenario es envolver su componente con un elemento DOM al que realmente pueda adjuntarle una referencia. Por ejemplo:

 import React, { createRef, Component } from "react"; import ChildComponent from "./child-component"; class MyComponent extends Component { componentDidMount() { const node = this.wrapper.current; /* Uses DOM node */ } wrapper = createRef(); render () { return ( <div ref={this.wrapper}> <ChildComponent>{this.props.children}</ChildComponent> </div> ); } } export default MyComponent;`

Para solucionar este problema, simplemente elimine React.StrictMode de index.js donde accede a la identificación de la raíz dom, eso lo solucionará.

En lugar de esto:

 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );

Utilice esta línea:

 ReactDOM.render(<App />,document.getElementById('root'));

No estoy seguro de si ayuda cuando se usa la biblioteca material-ui, pero en muchos casos esto puede ayudar:

 const nodeRef = React.useRef(null); return <div> <CSSTransition ... nodeRef={nodeRef}> <div ref={nodeRef}> ... </div> </CSSTransition> </div>

Un problema similar: a continuación resolvió el problema:

En la función ReactDOM.render() , cambia

desde

 <React.StrictMode> <SnackbarProvider> <App/> </SnackbarProvider> </React.StrictMode>

para

 <SnackbarProvider> <React.StrictMode> <App/> </React.StrictMode> </SnackbarProvider>

NOTA: Las etiquetas SnackbarProvider y React.StrictMode están invertidas.

He visto este error antes, cuando usé react-bootstrap y react-router-dom uno al lado del otro. reemplacé

 <Link to="/foo">sth</Link>

con

 <LinkContainer to="/foo/bar"> <Button>Foo</Button> </LinkContainer>

y no hay necesidad de usar Link para NavLink

Este es un problema de la biblioteca MaterialUI, y aquí hay una solución temporal antes de que se lance oficialmente el nuevo MaterialUI v5

Creo que este problema no es un error, sino una advertencia de desaprobación. el componente de la biblioteca aún funciona, pero usa una función que ya no estará disponible en versiones futuras. por lo tanto, la biblioteca debe actualizarse para usar otra función para reemplazar la anterior.

En Semantic UI React , este es un problema conocido , la mayoría de sus componentes todavía usan findDOMNode() . Esto se solucionará en la interfaz de usuario semántica React v3 , donde todos estos componentes se actualizarán para usar React.forwardRef() .

Al principio pensé que estaba haciendo algo mal y pasé bastante tiempo investigando, solo para descubrir que era un problema conocido.