从Redux状态更新功能组件状态

Question

我创建了一个简单的创建配置文件表单，如果已经设置了配置文件，我将在其中填充表单。我正在从Redux存储中获取配置文件状态，但是即使设置了配置文件，我也无法以某种方式看到表单中是否填充了数据。

已经存在一个与Updating Functional Component Local State Using Data From Redux State类似问题的查询，但是建议的答案是使用useEffect，而我已经在使用它。

import React from 'react';
import { withStyles, WithStyles } from '@material-ui/core/styles';
import { Typography, Grid, Button } from '@material-ui/core';
import { useDispatch, useSelector } from "react-redux";
import { useForm } from "react-hook-form";
import { joiResolver } from '@hookform/resolvers/joi';
import { useHistory } from "react-router-dom";
import { ProfileType } from '../../types';
import { ProfileSchema } from "../../schemas/Profile";
import FormSelect  from "../../components/select";
import FormInput  from "../../components/input";
import data from "../../data.json"; 
import styles from './Profile.styles'
import { setProfile } from './Profile.slice'
import { RootState } from '../../redux/store';
import { createProfile } from '../../apis/Profile.api';

const ProfileForm:React.FC<Props> = (prop) => {

  const history = useHistory();

  const dispatch = useDispatch();

  const profile = useSelector((state: RootState) => state.profile);

  const [user, setUser] = React.useState<ProfileType>(profile);

  const { handleSubmit, errors, control } = useForm<ProfileType>({resolver: joiResolver(ProfileSchema)});  

  React.useEffect(() => {
    setUser(profile);
  }, [profile]);

  console.log(user);

  const onSubmit = (data: ProfileType) => {
    createProfile(data);
    dispatch(setProfile(data));
    setUser(Object.assign(user, data))
    history.push('/question');
  }

  return (
    <React.Fragment>
      <Typography component="h1" variant="h4" align="center">
        Player Profile
      </Typography>
      <form className={prop.classes.form} onSubmit={handleSubmit(onSubmit)}>
        <Grid container spacing={4}>
          <Grid item xs={12} sm={6}>
            <FormInput name="firstName" label="First Name" type="text" required={true} fullWidth={true} defaultValue={user.firstName} errmsg={errors.firstName?.message} control={control}/>
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormInput name="lastName" label="Last Name" type="text" required={true} fullWidth={true} defaultValue={user.lastName} errmsg={errors.lastName?.message} control={control}/>  
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormInput name="quizAmount" label="No Of Questions" type="number" required={true} fullWidth={true} defaultValue={user.quizAmount} errmsg={errors.quizAmount?.message} control={control}/>
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormSelect name="quizCategory" label="Select Category" required={true} fullWidth={true} items={data.categories} value='' defaultValue={user.quizCategory} errmsg={errors.quizCategory?.message} control={control}/>
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormSelect name="quizDifficulty" label="Select Difficulty" required={true} fullWidth={true} items={data.diffculties} value='' defaultValue={user.quizDifficulty} errmsg={errors.quizDifficulty?.message} control={control}/>
          </Grid>
          <Grid item xs={12} sm={6}>
            <FormSelect name="quizType" label="Select Type" required={true} fullWidth={true} items={data.types} value="" defaultValue={user.quizType} errmsg={errors.quizType?.message} control={control}/>
          </Grid>
        </Grid>
        <Button type="submit" variant="contained" fullWidth color="primary" className={prop.classes.submit}> Get Questions </Button>
      </form>
    </React.Fragment>
  );
}

interface Props extends WithStyles<typeof styles> {}

export default withStyles(styles)(ProfileForm);