«Невозможно выполнить обновление состояния React на не смонтированном компоненте» для функции обратного вызова модального компонента - PullRequest
Новая
       5

«Невозможно выполнить обновление состояния React на не смонтированном компоненте» для функции обратного вызова модального компонента

0 голосов
/ 16 апреля 2020

В этом есть три элемента логики c, которые следует понимать:

1) Существует компонент, который вызывает модальное устройство и передает ему дочерний компонент, имеющий атрибут обратного вызова (который является функцией набора React Hook в вызывающем компоненте)

2) Модал монтируется в файле 'app', на несколько уровней выше родительского для вызывающего компонента.

3) Модал знает, что он видим, и получает дочерние элементы через избыточный код (что отправляет вызов компонента) 

// component call

import FilterMenu from "./FilterMenu";

const CallingComponent = ({ renderModal, setModalToggle }) => {
  const [rowFilter, setRowFilter] = useState({});

  const handleRenderFilterMenu = () => {
    renderModal({
      children: (
        <FilterMenu
          callback={setRowFilter}
          close={() => setModalToggle(false)}
        />
      )
    });
  };

  return (
    <div>
      <button onClick={handleRenderFilterMenu}>Click Me</button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    renderModal: boolean => {
      dispatch(renderModal(boolean));
    },
    setModalToggle: boolean => {
      dispatch(setModalToggle(boolean));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(CallingComponent);


// app (where modal is mounted)

const App = () => (
  <Router>
    <Routing/> // react router where all pages branch from 
    <Modal/>
  </Router>
);


// modal 

const Modal = ({ children, visible }) => {
  return (
    <Root visible={visible}>
      <Box>
        {children}
      </Box>
    </Root>
  );
};


// FilterMenu (modal child component, provided by calling component)

export default ({ callback, close }) => {
  const startingState = getStartingState();

  const [inputMatrix, setInputMatrix] = useState(startingState);

  const handleApply = () => {
    callback(inputMatrix);
    close();
  };

  return (
    <Root>
      ...
      <Button onClick={handleApply}>Apply Filter</Button>
    </Root>
  );
};

Когда этот обратный вызов устанавливает состояние в CallingComponent, появляется эта ошибка:

Невозможно выполнить обновление состояния React для отключенного компонента. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.

Природа этой ошибки - для асинхронных функций. Вы можете найти разговор об этом здесь https://github.com/facebook/react/issues/15006

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

Это работало раньше в другом репо.

Это также работало ДО того, как я смонтировал компонент приложения в Redux . Когда я удаляю этот кусок, эта ошибка больше не происходит.

Как реакция ожидает, что я уберу это, чтобы считаться верхом? Любые идеи о том, почему, когда я подключаю приложение к Redux, эта ошибка возникает?

Спасибо за ваше время и внимание.

...