React redux -刷新页面不使用useEffect设置表单数据

Question

当我点击" Profile"在我的主页上，这把我带到"个人资料"页面。组件和表单输入由已经存储在"用户"中的数据填充。以前的Redux状态。当我刷新页面时，所有输入都变成空白，尽管调度了loadOrCreateUser"(它从后端获取当前用户)并在useEffect钩子中设置表单数据。

页面刷新后，我检查了redux状态，以及"用户"。State中确实有用户的信息，但是表单数据没有被设置。这真的很奇怪，因为刷新之后，"用户"from useSelector变成未识别的，但是"用户"Redux状态有数据

<<p>Profile.js组件/strong>

import React from 'react'
import { Link, Redirect } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { loadOrCreateUser, updateUser } from '../../state/action-creators/authActions'
const Profile = () => {
const dispatch = useDispatch();
const user = useSelector(state => state.auth.user);
const [filedCheck, setFieldCheck] = useState(false);
const [formData, setFormData] = useState({
username: "",
email: "",
first_name: "",
last_name: "",
about: "",
password: ""
});
const {username, email, first_name, last_name, about, password} = formData;
useEffect(() => {
formData.password !== '' ? setFieldCheck(false) : setFieldCheck(true);
}, [formData.password])

useEffect(async() => {
await dispatch(loadOrCreateUser());
setFormData({
...formData, 
username: user.username,
email: user.email,
first_name: user.first_name,
last_name: user.last_name,
about: user.about
});
}, [])

const onChange = e => setFormData({
...formData, [e.target.name]: e.target.value
}); 
const onSubmit = e => {
e.preventDefault();
const data = {
username,
email,
first_name,
last_name,
about,
password
};
dispatch(updateUser(data));
}
return (
// Form inputs...
)
}
export default Profile

Answer 1

问题是，当调度"loadOrCreateUser"在页面刷新后的useEffect中，当setFormData">

为了解决这个问题，我添加了另一个名为isDone的状态，它被设置为true(在它自己的reducer中)，当"loadOrCreateUser"操作完成如下:

export const loadOrCreateUser = () => async (dispatch, getState) => {
try {
const res = await axios.get('/api/auth/get-or-create-user/', tokenConfig(getState));
dispatch({
type: GET_OR_CREATE_USER,
payload: res.data
})
dispatch({
type: UPDATE_DONE
})
} catch(err) {
localStorage.removeItem('token');
await axios.delete('/api/clear-session/', null);
dispatch({
type: AUTH_ERROR
});
dispatch({
type: RELOAD
});  
}
}

然后在Profile.js中，我添加了:

const isDone = useSelector(state => state.utils.isDone)

并在useEffect:

中使用

useEffect(() => {
dispatch(loadOrCreateUser());
user && setFormData({
...formData, 
username: user.username,
email: user.email,
first_name: user.first_name,
last_name: user.last_name,
about: user.about
});
}, [isDone])