第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在渲染組件之前運(yùn)行 useEffect hook

在渲染組件之前運(yùn)行 useEffect hook

繁星coding 2023-03-18 14:59:35
我有一個(gè)在我的 App.js 文件中使用的 useEffect 掛鉤。它將數(shù)據(jù)放入我需要在我的應(yīng)用程序中使用的 redux 存儲(chǔ)中。但它在 useEffect 運(yùn)行之前呈現(xiàn),因此數(shù)據(jù)未定義。然后 useEffect 正確運(yùn)行。我需要在渲染任何內(nèi)容之前運(yùn)行 useEffect。我怎么能那樣做?或者我應(yīng)該使用什么其他解決方案?我曾嘗試完全刪除 useEffect 并只運(yùn)行該操作,但這會(huì)導(dǎo)致它無(wú)休止地運(yùn)行。這是我的代碼:function App() {  const app = useSelector(state => state.app);  const auth = useSelector(state => state.auth);  const dispatch = useDispatch();  useEffect(() => {    dispatch(authActions.checkUser());  }, [dispatch]);  console.log(auth.user); //undefined  return (    <ThemeProvider theme={!app.theme ? darkTheme : theme}>      <CssBaseline />      <React.Fragment>        {/* TODO: Display drawer only when logged in */}        {/* <Drawer></Drawer> */}        <Switch>          <Route exact path="/" component={Login} />          <Route exact path="/dashboard">            <Dashboard user={auth.user} /> //auth.user is undefined when this gets rendered          </Route>          <Route exact path="/register" component={Register} />        </Switch>      </React.Fragment>    </ThemeProvider>  );}export const checkUser = () => async dispatch => {  let token = localStorage.getItem("auth-token");  if (token === null) {    localStorage.setItem("auth-token", "");    token = "";  }  const tokenRes = await Axios.post("http://localhost:5000/users/tokenIsValid", null, {    headers: { "x-auth-token": token }  });  if (tokenRes.data) {    const userRes = await Axios.get("http://localhost:5000/users/", {      headers: { "x-auth-token": token }    });    dispatch({      type: CHECK_USER,      token,      user: userRes.data    });  }};
查看完整描述

2 回答

?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

我需要在渲染任何內(nèi)容之前運(yùn)行 useEffect。我怎么能那樣做?

您不能在初始渲染之前useEffect運(yùn)行。

就像componentDidMount類(lèi)組件在初始渲染之后運(yùn)行,在初始渲染之后useEffect運(yùn)行,然后它的執(zhí)行取決于你是否傳遞第二個(gè)參數(shù),即依賴數(shù)組來(lái)掛鉤。useEffect

我應(yīng)該使用什么其他解決方案?

您可以通過(guò)確保在異步獲取的數(shù)據(jù)可用后才呈現(xiàn)它來(lái)有條件地呈現(xiàn)內(nèi)容。

return?(
???{?auth???<render?content>?:?null}
);

或者

return?(
???{?auth?&&?<render?content>?}
);

PS:< or >語(yǔ)法中不包含尖括號(hào)。它們只是作為您需要呈現(xiàn)的內(nèi)容的占位符。


查看完整回答
反對(duì) 回復(fù) 2023-03-18
?
慕姐4208626

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

選擇

您可以使用useMemo, 它不會(huì)等待re-render。它也將基于 useEffect 等依賴項(xiàng)以相同的方式執(zhí)行。

useMemo(()=>{
    doSomething() //Doesn't want until render is completed
     }, [dep1, dep2])


查看完整回答
反對(duì) 回復(fù) 2023-03-18
  • 2 回答
  • 0 關(guān)注
  • 188 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)