Предупреждение: findDOMNode устарел в StrictMode. findDOMNode был передан экземпляр Transition, который находится внутри StrictMode

Вызов setState выглядит так, как будто он записывается не в то место. Убедитесь, что он находится на объекте editTodo:

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

В index.js измените <React.StrictMode><App /><React.StrictMode> на <App />, и вы не увидите это предупреждение. Обратите внимание, что строгий режим помогает вам с

• Выявление компонентов с небезопасным жизненным циклом
• Предупреждение об использовании устаревшего API строки ref
• Предупреждение об устаревшем использовании findDOMNode
• Обнаружение неожиданных побочных эффектов
• Обнаружение устаревшего API контекста

Перед удаление его.

Если вы используете модальное окно или карусель из react-bootstrap, временным решением является отключение анимации. При их выключении предупреждение исчезает.

Для модальных окон:

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

Для каруселей:

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

Я знаю, что он лучше подходит в качестве комментария, если он не отвечает на вопрос OP, но у меня недостаточно репутации, чтобы сделать это, и, возможно, это кому-то поможет.

Ответ @Ross Allen не имеет отношения к основной проблеме (предупреждению), он решил проблему синтаксиса в коде.

Ответ @Ali Rehman больше связан с предупреждением, но он также не решает правильно проблему, он только скрывает проблему, чтобы предупреждение больше не появлялось. .. Почему бы и нет, если нас не волнуют устаревания !!

Да, проблема исходит из React.StrictMode:

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

StrictMode - это инструмент для выделения потенциальных проблем в приложении. Он активирует дополнительные проверки и предупреждения для своих потомков, например:

• Выявление компонентов с небезопасным жизненным циклом
• Предупреждение об использовании устаревшего API строки ref
• Предупреждение об устаревшем использовании findDOMNode
• Обнаружение неожиданных побочных эффектов
• Обнаружение устаревшего API контекста

Поскольку обратная трассировка ошибки не полностью указана в вопросе, я предполагаю, что проблема связана с предупреждением об устаревшем использовании findDOMNode из-за ссылки на элементы в методах рендеринга:

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

Когда компонент визуализируется, то есть модальное окно также было отрисовано, и мы пытаемся изменить состояния компонента, компонент (и, таким образом, модальный) будет повторно отрисован, и на этом этапе модальное окно не может иметь доступа к состояниям. .

Решение устранить предупреждение - использовать React refs. Refs помогает получить доступ к узлам DOM или элементам React, созданным в методе рендеринга.

Я не уверен, помогает ли это при использовании библиотеки material-ui, но во многих случаях это может помочь:

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

Я видел эту ошибку раньше, когда использовал response-bootstrap и react-router-dom рядом друг с другом. я заменил

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

с участием

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

и нет необходимости использовать ссылку для NavLink

Самое простое решение для этого типа сценария - обернуть ваш компонент элементом DOM, к которому вы можете прикрепить ссылку. Например:

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;`

Похожая проблема:

В функции ReactDOM.render() измените

из

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

to

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

ПРИМЕЧАНИЕ. Теги SnackbarProvider & React.StrictMode поменяны местами.

чтобы исправить это, просто сделайте это изменение в index.js из:

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

to

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

Чтобы решить эту проблему, просто удалите React.StrictMode из index.js, где вы получаете доступ к корневому идентификатору dom, который исправит его.

Вместо этого:

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

Используйте эту строку:

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