注销然后登录后数据未显示 - reactjs

Question

我在登录/注销时遇到问题，然后在表单中显示数据。如果我重新启动服务器并在不注销的情况下登录，它可以工作并显示数据。但是，如果我登录，然后注销，然后再次登录，似乎输入的数据花费的时间太长，并且不会显示在表单中。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}

        })

    }

}

我没有粘贴我的整个组件，因为它很多，但它只是重复输入。

我需要一种方法来修复注销后登录时丢失的数据。

Answer 1

简而言之，这是由于使用了错误的调用及其依赖项引起的。由于表单中逻辑的每个部分都需要单独处理，因此您将需要多种效果，如下所示：useEffect首先，如果要在用户状态更改时（从注销到登录）获取配置文件，则需要在用户登录时运行效果。getCurrentProfileuseEffect(() => {  // User has been logged in  if (loggedIn) getCurrentProfile();}, [loggedIn]);然后，您需要另一个效果来侦听更改，当用户的配置文件已成功提取时，从上面开始，以按预期填充表单字段：profileuseEffect(() => {  setFormData({    ... // see as above  });}, [profile]);最后，对于基于已完成字段的模式，我建议使用另一个来检查这些数据（正如我预测的那样，这可能是您的表单数据）：setShowuseEffectuseruseEffect(() => {  let completeFieldsCounter = 0;  if (user) {    ... // see snippets above  }  if(completeFieldsCounter == 9 ){    setShow(false)  } else {    setShow(true)  }}, [user]);

Answer 2

我以前遇到过同样的问题。我认为在函数末尾放入数组的内容存在问题。但很难从给出的东西中精确地分辨出来。useEffect首先，它只显示 Redux ，因此请检查有关您的登录/退出案例的信息。那是因为你放入数组，这意味着只要你的状态发生变化，它就会触发，所以也许你的状态不稳定，或者它有问题。这可能是您长时间加载（一遍又一遍地运行）的原因之一。- 如果您出于某些原因故意将加载放在那里。actionsreducersloadinguseEffectuseEffectloadingloadinguseEffect接下来，尝试从数组中删除并仅放入数组内部（不是作为函数，而是像我所写的那样）。loadinggetCurrentProfile  useEffect(() => {       getCurrentProfile();   }, [getCurrentProfile])这意味着除非调用 =使用一次，否则不会触发 useEffect。getCurrentProfile来自 反应效果钩子 文档如果使用此优化，请确保数组包含组件作用域中随时间变化并由效果使用的所有值（如 props 和状态）。否则，您的代码将引用以前呈现的陈旧值。详细了解如何处理函数以及当数组更改过于频繁时该怎么办。如果要运行效果并仅清理一次（在装载和卸载时），则可以传递一个空数组 （[]） 作为第二个参数。这告诉 React，你的效果不依赖于道具或状态的任何值，所以它永远不需要重新运行。这不是一种特殊情况 - 它直接遵循依赖项数组始终的工作方式。如果传递一个空数组 （[]），则效果内的 props 和状态将始终具有其初始值。虽然将 [] 作为第二个参数传递更接近于熟悉的组件DidMount 和组件将卸载心智模型，但通常有更好的解决方案来避免过于频繁地重新运行效果。另外，不要忘记 React 推迟运行使用效果，直到浏览器绘制完毕，所以做额外的工作不是一个问题。我们建议使用穷举 deps 规则作为我们的 eslint 插件-反应-钩子包的一部分。当依赖项指定不正确时，它会发出警告，并建议修复。祝您的项目好运，祝您编码愉快！