React Formik :如何使用formik值进行useEffect？

Question

如果formik的值发生了变化，我想使用useEffect来重新呈现一个字段。但是它不起作用..

实际上，我创建了一个小示例来说明我的问题。这里我有一个字段'title'，如果这个字段发生了变化(当我们在里面写的时候)，它应该调用useEffect并输出'update!‘但事实并非如此！

const FormikWidgetConfigurator = (props) => {
  useEffect(() => {
     // doesn't work if values has changed
     console.log('update!')
  }, [props.values]);

  return (
    <Form onSubmit={ props.handleSubmit } noValidate>
      <Form.Group className='py-3' >
        <Col md='6' style={{ padding: '0px' }}>
          <Form.Group controlId='title'>
            <Form.Control
              type='text'
              value={ props.values.title }
              onChange={props.handleChange}
            />
          </Form.Group>
        </Col>
      </Form.Group>
    </Form>
  )
}

const WidgetConfigurator = withFormik({
  mapPropsToValues(props) {
    return {
      title: 'No Title'
    };
  },

  validationSchema: props => Yup.object().shape({title: Yup.string()}),

  handleSubmit(values, { setSubmitting }) {// handle submit}
})(FormikWidgetConfigurator);

export default WidgetConfigurator;

编辑:实际上它是按照预期的方式工作的。(我没有改变任何东西)

谢谢!

Answer 1

使用普通的Formik，您的方法是有效的。

​

​

我猜问题出在您的自定义组件、Form.Control或Form.Group中

Answer 2

这不是一个很好的解决方案，但我发现的一个技巧是在Formik表单中有一个不可见的按钮；它可以访问Formik的所有属性，并将在其onClick中执行所需的任何逻辑。然后，您可以通过document.getElementById("..").click()从useEffect模拟单击该按钮的过程。

// Style it to be invisible
<Button id="testButton" type="button" onClick={() => {
    setFieldValue('test', '123');
    setTouched({});    
    // etc. any Formik action
}}>
</Button> 

useEffect：

useEffect(() => {
    document.getElementById("testButton").click(); // Simulate click
}, [dependency);