Как узнать, смонтирован ли компонент React?

Question

Я пытаюсь показать компонент ошибки (пользовательский компонент) в React JS, когда после нажатия кнопки произойдет ошибка. Время ожидания этого компонента составляет 2000 мс, после чего оно исчезает. Но если я нажимаю кнопку несколько раз, компонент ошибки появляется несколько раз и ждет 2 секунды.

Теперь, что мне нужно, если я знаю, что компонент ошибки уже смонтирован, то с помощью простого условия if-else я могу справиться со сценарием.

Поэтому я хочу знать, как узнатьесли конкретный компонент смонтирован в React.

Компонент ошибки имеет тайм-аут по умолчанию, равный 4 секундам. Поэтому, когда я нажимаю кнопку, появляется компонент Error, и он ждет 4 секунды для завершения. Теперь через 4 секунды, если я снова нажму кнопку, то ранее смонтированный компонент ошибки будет размонтирован, но все равно останется в верхней части экрана. Новый компонент ошибки с такими же данными появляется в верхней части экрана. Итак, за несколько мс у нас есть 2 компонента ошибки, которые видны на экране. Я хочу, чтобы, если кто-то находился в верхней части экрана, никакой другой компонент не устанавливался.

Answer 1

Если кнопка нажата, установите displayingError: true в состояние.

При нажатии кнопки проверьте, является ли displayingError значение true, если да, ничего не делайте, иначе отобразите ошибку.

После вашей задержки установите displayingError обратно на false.

Таким образом, он отображается только один раз, и дополнительные не будут создаваться при его активации.

Answer 2

отправить обратный вызов как prop, затем вызвать его из componentDidMount () отправить флаг из обратного вызова записать вашу логику в parent.