reactjs - React useEffect()，使用 React Hooks 获取数据并设置 formik 表单

Question

我想将这些（标题、描述、类别）值获取到以下表单。我怎样才能做到这一点？。我正在研究需要根据数据动态调整的 Formik 表单。当用户要编辑某些内容时，我想将数据设置为正确的表单字段。我认为我的代码中缺少一些东西。任何帮助都会很棒。

const PostEdit = ({ match, history }) => {

  const postId = match.params.id    
     
  //Data
  const [initialValues, setInitialValues] = useState({
    title: '',
    description: '',       
    category: '',
  })    
    
  const dispatch = useDispatch()

  const postDetails = useSelector((state) => state.postDetails)
  const { loading, error, post} = postDetails

  useEffect(() => {
    if (!post.title || post._id !== postId) {
      dispatch(listPostDetails(postId))
    } else {
      setInitialValues({
        title: post.title,
        description: post.description,           
        category: post.category

      })
    }
  }, [dispatch, history, postId, post,])

  const submitHandler = () => {}

  return (
    <>
      <div>
        <Grid>
          <Grid item xs={12}>            
              <Papervariant='outlined'>
                <Formik
                  initialValues={initialValues}
                  validationSchema={validationSchema}
                  onSubmit={submitHandler}
                >
                  {({ dirty, isValid, values }) => {
                    return (                      
                        <Form>
                          <DialogContent>
                            <Grid item container spacing={1} justify='center'>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                      
                                  label='Title'                                                                         
                                  name='title'
                                  required
                                  value={values.title}
                                  component={TextField}
                                />
                              </Grid>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                    
                                  label='Description'                                                               
                                  name='description'
                                  value={values.description}
                                  component={TextField}
                                />
                              </Grid>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                     
                                  label='Category'                                                             
                                  name='category'
                                  value={values.category}
                                  component={TextField}
                                />
                              </Grid>
                            </Grid>
                          </DialogContent>
                          <DialogActions>
                            <Button
                              disabled={!dirty || !isValid}
                              variant='contained'                               
                              type='Submit'
                            >
                              Add
                            </Button>
                          </DialogActions>
                        </Form>                     
                    )
                  }}
                </Formik>
              </Paper>            
          </Grid>
        </Grid>
      </div>
    </>
  )
}

export default PostEdit

Answer 1

Formik 可以用作钩子。https://formik.org/docs/api/useFormik

它将公开一个函数setValues，您可以使用它来动态更改表单数据

Answer 2

你错过了这个道具

enaleReinitialize={true}

所以，它应该是这样的

<Formik
   enableReinitialize={true} // You missed this prop
   validateOnChange={true}
   initialValues={initialValues}