亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

注銷然后登錄后數據未顯示 - reactjs

注銷然后登錄后數據未顯示 - reactjs

大話西游666 2022-09-29 16:33:43
我在登錄/注銷時遇到問題,然后在表單中顯示數據。如果我重新啟動服務器并在不注銷的情況下登錄,它可以工作并顯示數據。但是,如果我登錄,然后注銷,然后再次登錄,似乎輸入的數據花費的時間太長,并且不會顯示在表單中。useEffect這是我的登錄名:export const login = (email, password ) => async dispatch => {    const config = {        headers: {            'Content-Type':'application/json'        }    }    const body = JSON.stringify({email, password})    try{        const res = await axios.post('/api/auth/login', body, config)        dispatch({            type: LOGIN_SUCCESS,            payload: res.data        })        dispatch(loadUser())    } catch (e){        let errors = e.response.data;        console.log(errors)        if(errors) {            dispatch(setAlert(errors.message, 'danger'))        }        dispatch({            type: LOGIN_FAIL        })    }}這是我的注銷:export const logout = (history) => dispatch => {    dispatch ({ type: CLEAR_PROFILE })    dispatch ({ type: LOGOUT })    history.push('/proveedores')}這就是我獲取數據的方式:export const getCurrentProfile = () => async dispatch => {    try{        const res = await axios.get('/api/usuarios/me')        dispatch({            type: GET_PROFILE,            payload: res.data        })    } catch (e) {        dispatch({            type: PROFILE_ERROR,            payload: {msg: e.response.message}        })    }}我沒有粘貼我的整個組件,因為它很多,但它只是重復輸入。我需要一種方法來修復注銷后登錄時丟失的數據。
查看完整描述

2 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

簡而言之,這是由于使用了錯誤的調用及其依賴項引起的。由于表單中邏輯的每個部分都需要單獨處理,因此您將需要多種效果,如下所示:useEffect


首先,如果要在用戶狀態更改時(從注銷到登錄)獲取配置文件,則需要在用戶登錄時運行效果。getCurrentProfile


useEffect(() => {

  // User has been logged in

  if (loggedIn) getCurrentProfile();

}, [loggedIn]);

然后,您需要另一個效果來偵聽更改,當用戶的配置文件已成功提取時,從上面開始,以按預期填充表單字段:profile


useEffect(() => {

  setFormData({

    ... // see as above

  });

}, [profile]);

最后,對于基于已完成字段的模式,我建議使用另一個來檢查這些數據(正如我預測的那樣,這可能是您的表單數據):setShowuseEffectuser


useEffect(() => {

  let completeFieldsCounter = 0;

  if (user) {

    ... // see snippets above

  }

  if(completeFieldsCounter == 9 ){

    setShow(false)

  } else {

    setShow(true)

  }

}, [user]);


查看完整回答
反對 回復 2022-09-29
?
九州編程

TA貢獻1785條經驗 獲得超4個贊

我以前遇到過同樣的問題。我認為在函數末尾放入數組的內容存在問題。但很難從給出的東西中精確地分辨出來。useEffect

首先,它只顯示 Redux ,因此請檢查有關您的登錄/退出案例的信息。那是因為你放入數組,這意味著只要你的狀態發生變化,它就會觸發,所以也許你的狀態不穩定,或者它有問題。這可能是您長時間加載(一遍又一遍地運行)的原因之一。- 如果您出于某些原因故意將加載放在那里。actionsreducersloadinguseEffectuseEffectloadingloadinguseEffect

接下來,嘗試從數組中刪除并僅放入數組內部(不是作為函數,而是像我所寫的那樣)。loadinggetCurrentProfile

  useEffect(() => { 
     getCurrentProfile();
  }, [getCurrentProfile])

這意味著除非調用 =使用一次,否則不會觸發 useEffect。getCurrentProfile

來自 反應效果鉤子 文檔

如果使用此優化,請確保數組包含組件作用域中隨時間變化并由效果使用的所有值(如 props 和狀態)。否則,您的代碼將引用以前呈現的陳舊值。詳細了解如何處理函數以及當數組更改過于頻繁時該怎么辦。

如果要運行效果并僅清理一次(在裝載和卸載時),則可以傳遞一個空數組 ([]) 作為第二個參數。這告訴 React,你的效果不依賴于道具或狀態的任何值,所以它永遠不需要重新運行。這不是一種特殊情況 - 它直接遵循依賴項數組始終的工作方式。

如果傳遞一個空數組 ([]),則效果內的 props 和狀態將始終具有其初始值。雖然將 [] 作為第二個參數傳遞更接近于熟悉的組件DidMount 和組件將卸載心智模型,但通常有更好的解決方案來避免過于頻繁地重新運行效果。另外,不要忘記 React 推遲運行使用效果,直到瀏覽器繪制完畢,所以做額外的工作不是一個問題。

我們建議使用窮舉 deps 規則作為我們的 eslint 插件-反應-鉤子包的一部分。當依賴項指定不正確時,它會發出警告,并建議修復。

祝您的項目好運,祝您編碼愉快!


查看完整回答
反對 回復 2022-09-29
  • 2 回答
  • 0 關注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號