Question

我正在尝试在Formik中构建自定义表单字段以进行表排序。我有多个<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的render函数正确地发出了正确的field对象。但是，它不会出现在onSort中。那继续使用旧物体。

问题根本不在形式上，而是在Table内的表头上有一个useMemo，它不依赖于onSort回调。因此，当重新计算onSort回调时，就没有重新计算标头，并且我正在调用旧版本的回调，该回调的闭合中包括旧数据。

这里的课程是当心useMemo中包含的回调，它们可能正在调用闭包的旧版本。

onClick处理程序中的Formik field.value陈旧

1 个答案: