Установить состояние на размонтированном компоненте за пределами useEffect - PullRequest
Новая
       28

Установить состояние на размонтированном компоненте за пределами useEffect

0 голосов
/ 26 июня 2019

Когда setState вызывается после размонтирования компонента в асинхронном clickHandler вызывает предупреждение в консоли: 

Warning: Can't perform a React state update on an unmounted component.

См. Пример Codesandbox 

function App() {
  const [show, setShow] = useState(true)
  return {show && <Button
          text="Click to remove"
          clickHandler={() => setShow(false)}
        /> }
}
function Button({ text, clickHandler }) {
  const [state, setState] = useState(text);

  const handleClick = async () => {
    await clickHandler();
    setState("I was clicked");
  };

  return <button onClick={handleClick}> {state}</button>;
}

Нажатие *Кнопка 1009 * размонтирует кнопку, а затем обновит состояние.

Цель состоит в том, чтобы установить состояние компонента кнопки после асинхронного вызова.Этот асинхронный вызов может, но не должен вызывать отключение кнопки.Я ищу способ отказаться от setState после асинхронного вызова.

Я не вижу, как этого можно избежать, используя useEffect.

Есть дваВозможные обходные пути в примере.Каждый использует useRef, чтобы проверить, демонтирован ли компонент (как рекомендовано в # 14369 (комментарий) ).Это не похоже на реакцию.

Другой обходной путь использует рекомендуемую защитную переменную useEffect (например, # 14369 (комментарий) ).Но чтобы получить clickHandler из useEffect, clickHandler сохраняется в состоянии.Однако, чтобы перевести функцию в состояние, ее необходимо заключить в другую функцию, поскольку функция setState из useState будет вызывать функцию, заданную в качестве аргумента.

...