Javascript Formik初始值与Redux不同步

此表单用于编辑用户配置文件。它应该加载初始值的最新用户数据。为了处理这个问题，我在useEffect中添加了一个redux fetchUser操作，并在redux存储中将表单的初始值设置为currentUser。fetchUser点击数据库端点并更新redux存储中的currentUser

但是，如果我提交表单并重新加载页面，则初始数据不会更新

我不确定为什么我的初始值/表单与我的redux商店不同步。如果我离开表单并返回表单两次，表单将使用正确的数据进行更新

我的假设是，表单不会在每次渲染组件时重置初始值。看起来数据正在持久化。我尝试将对象传递给resetForm（）以强制更新初始值，但这会导致相同的问题。如果

以下是完整的react组件：

import { Formik, Form, Field, ErrorMessage } from "formik"
//redux action that fetches current user
import { fetchUser } from "../../actions"
import { connect } from "react-redux"
import profileSchema from "./yupSchema"
import updateProfile from "./updateAxiosCall"

const submitData = (data, resetForm, tagNames) => {
  const newProfile = { ...data}
  //end point call - working as intended
  updateProfile(newProfile)
  resetForm()
}

const ProfileForm = ({ currentUser, fetchUser }) => {


  const [formData, setFormData] = useState(null)
  useEffect(() => {
    //grab user on component render
    fetchUser()
    setFormData({
      linkedin: currentUser.linkedin,
      github: currentUser.github,
      instagram: currentUser.instagram,
      facebook: currentUser.facebook,
      twitter: currentUser.twitter,
      header: currentUser.header,
      bio: currentUser.bio,
    })
  }, [])


  if (formData === null) {
    return <div>Not ready</div>
  } else {
    return (
        <Formik
          initialValues={formData}
          validationSchema={profileSchema}
          onSubmit={(values, { resetForm }) => {
            submitData(values, resetForm, tagNames)
          }}
        >
          {({ errors, resetForm, handleChange, touched, values, onSubmit }) => (
            <Form
              style={{
                display: "flex",
                flexDirection: "column",
                width: "100%",
              }}
              autoComplete="off"
            >
              //This is up to date
              <h1>{currentUser.header}</h1>
              <TextField
                error={errors.header && touched.header}
                onChange={handleChange}
                name="header"
                variant="outlined"
                value={values.header || ""}
                id="header"
                margin="normal"
                label="header"
                helperText={
                  errors.header && touched.header ? errors.header : null
                }
              />

         {/* ...additional <TextField> components */}
              <Button
                style={{ margin: "10px 0px" }}
                size="large"
                margin="normal"
                type="submit"
                variant="contained"
                color="primary"
              >
                Save
              </Button>
            </Form>
          )}
        </Formik>

    )
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.currentUser,
  }
}

export default connect(mapStateToProps, { fetchUser })(ProfileForm)

从“Formik”导入{Formik，Form，Field，ErrorMessage}
//获取当前用户的redux操作
从“./../actions”导入{fetchUser}
从“react redux”导入{connect}
从“/yupSchema”导入profileSchema
从“/updateAxiosCall”导入updateProfile
const submitData=（数据、重置表单、标记名）=>{
const newProfile={…data}
//端点呼叫-按预期工作
更新配置文件（新配置文件）
重置表单（）
}
const ProfileForm=（{currentUser，fetchUser}）=>{
常量[formData，setFormData]=useState（null）
useffect（（）=>{
//在组件渲染上抓取用户
fetchUser（）
setFormData({
linkedin:currentUser.linkedin，
github:currentUser.github，
instagram:currentUser.instagram，
facebook:currentUser.facebook，
twitter:currentUser.twitter，
标题：currentUser.header，
bio:currentUser.bio，
})
}, [])
if（formData==null）{
返回未准备好
}否则{
返回(
{
submitData（值、重置格式、标记名）
}}
>
{（{errors，resetForm，handleChange，toucted，values，onSubmit}）=>(
//这是最新的
{currentUser.header}
{/*…其他组件*/}
拯救
)}
)
}
}
函数MapStateTops（状态）{
返回{
currentUser:state.currentUser，
}
}
导出默认连接（MapStateTops，{fetchUser}）（ProfileForm）

您可能需要将

useffect

挂钩分离为2个

useffect

s。一个钩子用于“componentDidMount”循环（例如

[]

），另一个钩子用于观察对

currentUser

的更改

例如：

const [formData, setFormData] = useState(null)

useEffect(() => {
  //grab user on component render
  fetchUser()
}, [])


useEffect(() => {
  setFormData({
    linkedin: currentUser.linkedin,
    github: currentUser.github,
    instagram: currentUser.instagram,
    facebook: currentUser.facebook,
    twitter: currentUser.twitter,
    header: currentUser.header,
    bio: currentUser.bio,
  })
}, [ currentUser ])

---

将

enableReinitialize={true}

作为Formik属性。 因此：

---

我试过了，但运气不好。谢谢你的回复。
<Formik
enableReinitialize={true}
initialValues={formData}
...