React Final Form中form.restart触发FieldArray无效验证的解决方法

我有一个包含FieldArray的表单，底部设有通过form.restart删除所有列表项的按钮。执行该操作时会触发每个字段的验证，但字段值为undefined，这破坏了验证逻辑。理论上此时完全不应触发验证，请问如何消除form.restart时的验证？

方法一：改用form.reset代替form.restart #

form.reset()的默认行为是将表单恢复为初始值，且不会触发验证逻辑。如果你的初始值就是空数组{ items: [] }，直接调用无参的form.reset()即可实现需求。

方法二：给form.restart传入验证控制参数 #

如果必须使用form.restart，可以在调用时传入配置选项，明确禁止触发验证：

form.restart({ items: [] }, { keepDirty: true, shouldValidate: false })

兜底方案：在验证函数中跳过undefined值的验证 #

如果上述方法无法适用，也可以在字段的验证函数中增加判断，当值为undefined时直接跳过验证：

validate={(value) => {
  if (value === undefined) return;
  // 你的正常验证逻辑
}}

import React from "react";
import { Form, Field } from "react-final-form";
import { FieldArray } from "react-final-form-arrays";
import arrayMutators from "final-form-arrays";

import "./styles.css";

export default function App() {
  const [values] = React.useState({ items: [] });

  const renderForm = ({ form }) => {
    return (
      <div>
        <FieldArray name="items">
          {({ fields }) => (
            <div>
              {fields.map((name, index) => (
                <div key={name}>
                  <Field
                    name={`${name}.title`}
                    validate={(value) => console.log(value)}
                    key={name}
                  >
                    {({ input }) => (
                      <input
                        value={input.value}
                        onChange={(event) => input.onChange(event.target.value)}
                      />
                    )}
                  </Field>
                </div>
              ))}
              <button onClick={() => fields.push({ title: "111" })}>
                add item
              </button>
              {/* 方法一：使用reset */}
              <button onClick={() => form.reset()}>reset</button>
              {/* 方法二：带参数的restart（可注释掉上面的reset按钮使用） */}
              {/* <button onClick={() => form.restart({ items: [] }, { keepDirty: true, shouldValidate: false })}>reset</button> */}
            </div>
          )}
        </FieldArray>
      </div>
    );
  };

  return (
    <div className="App">
      <Form
        onSubmit={() => {}}
        initialValues={values}
        render={renderForm}
        mutators={{ ...arrayMutators }}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者dyuss