Avertissement : findDOMNode est obsolète en StrictMode. findDOMNode a reçu une instance de Transition qui se trouve à l'intérieur de StrictMode

Question

J'essaie d'utiliser une fonction comme accessoire à l'intérieur d'un composant et ce composant est un enfant d'un autre composant. Mais la fonction ne fonctionne pas.? Puis-je savoir pourquoi. C'est l'avertissement que je reçois dans la console.

Avertissement : findDOMNode est obsolète en StrictMode. findDOMNode a reçu une instance de Transition qui se trouve à l'intérieur de StrictMode. Au lieu de cela, ajoutez une référence directement à l'élément que vous souhaitez référencer

C'est mon code

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

  }
}

Answer 1

Si vous utilisez un modal ou un carrousel de react-bootstrap une solution de contournement désactive les animations . Les désactiver fait disparaître l'avertissement.

Pour les modaux :

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

Pour les carrousels :

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

Je sais que cela conviendrait mieux comme commentaire une fois qu'il ne répond pas à la question OP, mais je n'ai pas assez de réputation pour le faire et peut-être que cela aide quelqu'un.

Answer 2

L' setState semble avoir été écrit au mauvais endroit. Assurez-vous qu'il se trouve sur l'objet editTodo :

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

Answer 3

Je ne sais pas si cela aide lors de l'utilisation de la bibliothèque material-ui, mais dans de nombreux cas, cela peut aider :

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