Каков порядок выполнения хука useEffect в реагировать? - PullRequest
Новая
       37

Каков порядок выполнения хука useEffect в реагировать?

2 голосов
/ 25 апреля 2020

Я создаю простое приложение реакции с маршрутизатором.

Я хочу получить данные с сервера в одном из дочерних компонентов, но данные будут выбираться только в том случае, если пользователь вошел в систему, поэтому в компоненте маршрутизатора I проверьте, вошел ли пользователь в хук useEffect или нет. Если он вошел в систему, я устанавливаю переменную, к которой я получаю доступ после слов.

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

, но проблема в том, что useEffect дочернего компонента выполняется до использованияЭффект компонента маршрутизатора

Пример кода, например

Мой компонент маршрутизатора 

import React, { useEffect } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import App from "./App";
// import AllWatchers from './components/AllWatchers'

export default function Router() {
  useEffect(() => {
    console.log("router");
  }, []);
  console.log("inrouter");
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          {/* <Route path='/watchers' component={AllWatchers} /> */}
        </Switch>
      </BrowserRouter>
    </div>
  );
}

** Мой компонент приложения (дочерний) ** 

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    console.log("App");
  }, []);
  console.log("inapp");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

вывод на консоль для этого составляет 

inrouter 
inrouter 
inapp 
inapp 
App 
router

, поэтому мой компонент маршрутизатора рендерит первым, но сначала выполняется ловушка useEffect компонента App почему?

вы можете просмотреть код https://codesandbox.io/s/heuristic-gagarin-ego8d?file= / src / App. js: 0-319 и проверить консоль

Ответы [ 3 ]

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

Если пользователь вошел в систему, вы можете установить состояние, такое как const [userLoggedIn, setUserLoggedIn] = React.useState(false)

Тогда пользовательский компонент может быть 

{userLoggedIn && <UserComponent />}

Это будет отображать UserComponent только если userLoggedIn.

Другой подход заключается в том, что вы передаете userLoggedIn как реквизит, а затем извлекаете данные только тогда, когда этот реквизит верен. 

const UserComponent = ({userLoggedIn}) => {
  React.useEffect(() => {
    if(userLoggedIn) {
      // Function that fetchs data.
    }
  }, [userLoggedIn])
}
0 голосов
/ 25 апреля 2020

Согласно документам первая краска для ребенка и родителя происходит одновременно, и порядок не имеет значения. Лучше всего было бы заблокировать монтирование дочернего компонента до завершения загрузки вызова API родительского компонента.

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

Я не знаю, как объяснить, почему это происходит, но вот краткое решение для вас. 

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("App");
    }, 2000);
    return () => clearTimeout(timer);
  }, []);
  console.log("inapp");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Понял 

inrouter 
inrouter 
inapp 
inapp 
router 
App
...