Как предотвратить бесконечное l oop с помощью React's useReducer, useContext и useEffect

Question

• 1000

Вот пример проблемы здесь, на CodeSandbox .

Очевидно, что трудно говорить о проблеме, не перепубликуя здесь весь код, но ключевые моменты:

Root:

function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const value = { state, dispatch };

  return (
<Context.Provider value={value}>
...
</Context.Provider>

Дочерний:

export const Page1: FC = () => {
  const { dispatch, state } = useContext(Context);
  const { isLoading } = state;

  useEffect(() => {
    dispatch({
      type: "loading",
      payload: false
    });
  }, [dispatch]);

 return (...)

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

Полный пример на CodeSandbox .

Answer 1

Проблема root здесь

<Route path="/page1" component={() => <Page1 />} />

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

Вам нужно изменить это следующим образом:

<Route path="/page1"><Page1 /></Route>
// or
<Route path="/page1" component={Page1} />

Цитата из документов response-router:

Когда вы используете компонент (вместо рендеринга или дочерних элементов, как показано ниже), маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для свойства компонента, вы будете создавать новый компонент при каждом рендеринге. Это приводит к размонтированию существующего компонента и монтированию нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте рендеринг или дочернюю опору (ниже).

Источник: https://reactrouter.com/web/api/Route/route-render-methods