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