Проблема при реализации асинхроной загрузки компомнента

Question

Проблема: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Исходный код:

export function asyncComponent(importComponent, props){
  const [Component, setComponent] = useState(null);
  if(!Component){
     importComponent().then(cmp =>setComponent(cmp?.default.bind(null, props) || null));
  }
  return Component;
}

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

---Дополение №1 ---

 Content = props => asyncComponent(() => import('Catalog/test'), props) || <div/>;
 return (
          <div>
            <Content {...props} />
          </div>
        );

Answer 1

Вероятнее всего, Вам нужно вызывать функцию в тот момент, когда компонент уже отписывался на странице, а вы делаете наоборот. Для этого, используйте хук useEffect:

const dispatch = useDispatch()
useEffect(() => {
    dispatch(asyncComponent())
}, [dispatch])

Попробуйте добавить данный код и соответствцющие импорты в файл, в которм вызываете эту функцию

БЛОГ НА HUSL

Проблема при реализации асинхроной загрузки компомнента

Ответы (1 шт):