Formik field.value 在 onClick 处理程序中过时

Question

我正在尝试在 Formik 中构建自定义表单字段以进行 table 排序。我有许多 <th> 元素，它们的 onClick 处理程序提供给单个回调 (onSort)，然后像这样提供给 Field 以跟踪当前值排序键：

<Formik
  initialValues={{
    sort: 'date',
  }}
>
  <Form validate={...}>
    <Field name="sort">
      {({ field, form }) => <>
        <input {...field} />
        <Table onSort={key => {
          console.log(field.value); // This is always the initial value!
          key = maybeInvertKey(key, field.value);
          form.setFieldValue(field.name, key);
         }} />
      </>
    </Field>
  </Form>
</Formik>

有趣的是，validate 函数使用正确的值调用。输入也显示正确的值。下次我的 onClick 处理程序触发时，我将无法访问该值。我错过了什么？

Answer 1

好的，这是由于记忆造成的错误，我现在将其分享给遇到类似问题的下一个人。

我发现 Field 的渲染函数正确地发出了正确的 field object。然而，这不会出现在 onSort 中。那继续使用旧的 object.

问题根本不在表格中，但在 Table 中 table headers 上有一个 useMemo，它不依赖于onSort回调。因此，当 onSort 回调被重新计算时， headers 并没有被重新计算，我正在调用旧版本的回调，它在其闭包中包含旧数据。

这里的教训是要注意 useMemo 中包含的回调，它们可能会调用旧版本的闭包。

Formik field.value 在 onClick 处理程序中过时

Formik field.value stale in onClick handler

reactjs

formik