Formik 初始值与 Redux 不同步

Question

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

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

我不确定为什么我的初始值/表单与我的 redux 存储不同步。如果我离开表单并导航回表单两次，该表单将更新为正确的数据。

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

这是完整的反应组件：

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)

Answer 1

作为enableReinitialize={true}Formik 属性。所以这：

<Formik
enableReinitialize={true}
initialValues={formData}
...