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

使用 vanilla Formik您的方法有效。

我的猜測是問題出在您的自定義組件Form.Control或Form.Group

Answer 2

這不是一個很好的解決方案，但我發現的一個技巧是在 Formik 表單內有一個不可見的按鈕； 它可以訪問 Formik 的所有屬性，並將執行其onClick中所需的任何邏輯。 然后從useEffect您可以通過document.getElementById("..").click()模擬該按鈕的單擊。

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

使用效果：

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