Как предотвратить бесконечное l oop с помощью React's useReducer, useContext и useEffect - PullRequest
0 голосов
/ 09 июля 2020
• 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 .

1 Ответ

2 голосов
/ 09 июля 2020

Проблема 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...