Estoy tratando de usar una función como accesorio dentro de un componente y este componente es hijo de otro componente. Pero la función no funciona.? Puedo saber por qué. Esta es la advertencia que estoy recibiendo en la consola.
Advertencia: findDOMNode está en desuso en StrictMode. findDOMNode recibió una instancia de Transition que está dentro de StrictMode. En su lugar, agregue una referencia directamente al elemento al que desea hacer referencia
este es mi codigo
class Todo extends Component { state = { show: false, editTodo: { id: "", title: "", isCompleted: false } } handleClose = () => { this.setState({ show: false }) } handleShow = () => { this.setState({ show: true }) } getStyle () { return { background: '#f4f4f4', padding: '10px', borderBottom: '1px #ccc dotted', textDecoration: this.props.todo.isCompleted ? 'line-through' : 'none' } } //this method checks for changes in the edit field handleChange = (event) => { this.setState({ title: event.target.value }) console.log(this.state.editTodo.title); } render () { //destructuring const { id, title } = this.props.todo; return ( <div style={this.getStyle()}> <p> <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''} {title} <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '} <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button> </p> <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> </div> ) } }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
Consulte https://reactjs.org/docs/strict-mode.html antes de eliminarlo.
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 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:
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.