Как сбросить состояние перед вызовом рендера в React?

Question

Я показываю всплывающее окно при нажатии на значок копирования. Когда я нажимаю значок копирования, я устанавливаю состояние «showPopup» в значение true. Моя функция рендеринга теперь видит, что это правда, и отображает всплывающее окно. Всплывающее окно автоматически закрывается, если я щелкаю снаружи где-либо еще.

Пока все хорошо.

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

Однако предыдущее состояние «showPopup» является истинным, а не ложным. Поэтому независимо от того, где я нажимаю на тот же экран, я всегда показываю всплывающее окно. Я хочу, чтобы он появлялся только тогда, когда я специально нажимал кнопку копирования.

Любая идея, как я могу это исправить, я попробовал componentDidUpdate следующим образом:

  componentDidUpdate = (prevProps, prevState) => {
    if (prevState.showPopup === true) {
      this.setState({showPopup: false});
    }};

Но это вызывает проблему, когда во второй раз я пытаюсь снова щелкнуть значок копирования. На этот раз всплывающее окно будет появляться только каждые 2 раза, когда я нажимаю значок копирования ...

есть идеи, как убедиться, что начальное состояние showPopup всегда сбрасывается в false?

Answer 1

Как и выше, это мой ответ без возможности увидеть ваш код. Вам нужно установить showPopup в false в вашем действии onCLose во всплывающем окне. Вот ленивый пример того, о чем я говорю.

<Popover onClose={() => setShowPopup(false)} />

Это событие будет срабатывать каждый раз, когда всплывающее окно закрывается (что включает щелчок), и, таким образом, ваше состояние будет установлено в false.

РЕДАКТИРОВАТЬ: Я использовал перехватчики состояния React, и я только что понял, что вы используете компонент класса, так что на самом деле это будет выглядеть так:

<Popover onClose={() => this.setState({showPopup: false})} />

Однако, для любого, кто использует функциональный компонент и состояние крючки, используйте предыдущий ответ.

Answer 2

Вы не передали свой код, поэтому я предоставляю свое решение, не видя ваш код.

Вы должны обновить состояние «showPopup» отдельно, в методе, называемом действием onClick компонента копирования, а не обновлять его. в componentDidUpdate.

Answer 3

Мой ответ без возможности видеть какой-либо ваш код будет состоять в том, чтобы установить showPopup в false при изменении раскрывающегося списка

<select onChange={() => this.setState({showPopup: false})}>
<option></option>
</select>