React redux - 刷新页面不使用useEffect设置Form数据答案

【问题标题】：React redux - refreshing the page does not set Form data with useEffectReact redux - 刷新页面不使用useEffect设置Form数据
【发布时间】：2021-11-01 19:53:01
【问题描述】：

当我在我的主页上单击“个人资料”时，这会将我带到“个人资料页面”组件，并且表单输入由之前已经存储在“用户”redux 状态中的数据填充。当我刷新页面时，所有输入都变为空白，尽管调度了“loadOrCreateUser”（这让我从后端获取了当前用户）并在 useEffect 挂钩中设置了表单数据。

页面刷新后，我检查了redux状态，“用户”状态确实有用户信息，但表单数据没有设置。真的很奇怪，因为刷新后，来自useSelector的“用户”变得无法识别，而“用户”的redux状态却有数据。

Profile.js 组件

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

【问题讨论】：

这能回答你的问题吗？ How to trigger off callback after updating state in Redux?
并非如此。它说我应该向 useEffect 添加输入。在我的情况下，这将是“用户”，所以当它发生变化时，这应该会触发 useEffect。但是如果我这样做并点击刷新，表单数据会被设置，但 useEffect 会陷入无限循环......

标签： reactjs react-redux

【解决方案1】：

问题是在页面刷新后在useEffect中调度“loadOrCreateUser”时，下一次调用“setFormData”时动作还没有完成。

为了解决这个问题，我添加了另一个名为 isDone 的状态，它在“loadOrCreateUser”操作完成时设置为 true（在它自己的 reducer 中），如下所示：

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])

【讨论】：