React Formik：如何使用 formik 值的 useEffect？答案

【问题标题】：React Formik : How to useEffect with formik values?React Formik：如何使用 formik 值的 useEffect？
【发布时间】：2021-03-08 04:35:32
【问题描述】：

如果 formik 的值发生变化，我想使用 useEffect 重新渲染字段。但它不起作用..

实际上我创建了一个小例子来说明我的问题。这里我有一个字段“标题”，如果这个字段发生了变化（当我们写进去时）它应该调用 useEffect 并打印“更新！”但它没有！

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;

编辑：实际上它按预期工作。（我没有改变任何东西）

谢谢！

【问题讨论】：

为什么要特别触发 useEffect ？您可以使用 handleChange 处理更改，如果您正在寻找特定的目标，您可以在您的方法中进行过滤。
顺便说一句，useEffect 不会导致重新渲染

标签： reactjs formik

【解决方案1】：

使用 vanilla Formik 你的方法有效。

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

【讨论】：

【解决方案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);

【讨论】：