приложение реагировать js запуск перед использованием маршрутизатора эффекта - PullRequest
Новая
       21

приложение реагировать js запуск перед использованием маршрутизатора эффекта

0 голосов
/ 29 мая 2020

У меня проблема, как я могу запустить свой метод useeffect в моем приложении js файл перед маршрутизатором

прежде всего, что я могу сделать, чтобы триггер useeffect был в приложении js

Приложение js Файл 

import GlobalContext from "./context/globalContext";
import Routers from "./router/index"
function App() {
    const {initAuth} = useContext(GlobalContext)
    alert("appjs")
    useEffect(() => {
        alert("appJS Use Effect")
        initAuth()
    }, [])
    return (
        <React.Fragment>
                <Routers/>
        </React.Fragment>
    );
}
export default App;

Мой маршрутизатор 

export default function Routers() {
    alert("RoutersJS")
    useEffect(()=>{
        alert("useEffect RouterJS")
    },[])
    return (
        <Router>
             ....
       </Router>

    )
}

1 Ответ

0 голосов
/ 29 мая 2020

Юсуф прав, что вы не можете сделать это напрямую или изменить порядок рендеринга. Если есть побочный эффект, который абсолютно необходимо правильно упорядочить между двумя элементами, вы можете создать опору для маршрутизатора, которая сообщит ему, когда ему разрешено сделать этот побочный эффект. эти элементы, и я бы не рекомендовал его, если вам не нужно, чтобы эти два элемента имели побочный эффект, который должен быть упорядочен. 

function App() {
    ...
    const [hasAlerted, setHasAlerted] = useState(false);
    useEffect(() => {
        alert("appJS Use Effect");
        initAuth();
        setHasAlerted(true);
    }, [])
    return (
        <React.Fragment>
                <Routers canAlert={hasAlerted} />
        </React.Fragment>
    );
}


export default function Routers({canAlert})) {
    useEffect(()=>{
        if (canAlert) {
            alert("useEffect RouterJS")
        }
    },[canAlert])
    return (
        <Router>
             ....
       </Router>

    )
}

Краткое объяснение

При первом рендеринге hasAlerted будет ложным. App выдаст предупреждение после первого рендеринга. Мы передадим canAlert=false компоненту Routers, поэтому он не будет предупреждать о первом рендеринге.

Потому что мы setHasAlerted(true) дерево будет рендерить снова. На 2-м рендере hasAlerted будет истинным. App не будет предупреждать, потому что его зависимости useEffect не изменились. Мы передадим canAlert=true компоненту Routers, поэтому он будет предупреждать о втором рендеринге.

Опять же, я бы, вероятно, изучил другие решения, если вы сможете.

...