Formik FieldArray 使用 Yup 进行嵌套对象验证

Question

https://codesandbox.io/s/wonderful-brattain-928gd

在上面，我添加了一些我试图解决的问题的示例代码。我不确定如何将错误映射到 FieldArray 中的正确项目。

在示例中，有/否单选按钮允许用户指示他们是否有想要添加的食物。如果他们选择“是”，则会出现食物选项，他们必须选择至少一种食物并输入其过期日期才能完全验证。

当用户未能在文本字段中输入到期日期时，我正在尝试添加“到期”验证错误。例如，如果我选择“牛肉”并且没有输入到期日期，则错误会填充在 Formik 错误中。但是，我不知道如何将该错误映射到正确的过期文本框。

感谢任何帮助！

注意：

验证仅在单击经过验证的按钮时触发

Answer 1

有codesandbox，代码如下：

<Form>
              <pre
                style={{
                  textAlign: "left"
                }}
              >
                <h3>Data</h3>
                {JSON.stringify(values, null, 2)}

                <h3>Errors</h3>
                {JSON.stringify(errors, null, 2)}
              </pre>
              <Field
                name="food.hasFood"
                value
                type="radio"
                onChange={e => {
                  setFieldValue("food.hasFood", true);
                }}
              />{" "}
              Yes
              <Field
                name="food.hasFood"
                value={false}
                type="radio"
                onChange={e => {
                  setFieldValue("food.hasFood", false);
                }}
              />{" "}
              No
              {values.food.hasFood && (
                <FieldArray name="food.selected">
                  {arrayHelpers => {
                    return foodTypes.map(item => (
                      <div key={item}>
                        <Field
                          name={item}
                          value={item}
                          type="checkbox"
                          as={Checkbox}
                          checked={values.food.selected
                            .map(f => f.name)
                            .includes(item)}
                          onChange={e => {
                            if (e.target.checked) {
                              arrayHelpers.push({
                                name: e.target.value,
                                expiration: ""
                              });
                            } else {
                              const index = values.food.selected
                                .map(f => f.name)
                                .indexOf(e.target.value);
                              arrayHelpers.remove(index);
                            }
                          }}
                        />
                        {item}
                        {errors.food && touched.food && (
                          <p>
                            {Array.isArray(errors.food.selected)
                              ? ""
                              : errors.food.selected}
                          </p>
                        )}
                        {values.food.selected.map((selectedFood, index) => {
                          if (item === selectedFood.name) {
                            return (
                              <div>
                                <Field
                                  key={index}
                                  as={TextField}
                                  name={`food.selected[${index}].expiration`}
                                />
                                {console.log(errors)}
                                {errors.food && touched.food && (
                                  <p>
                                    {Array.isArray(errors.food.selected)
                                      ? errors.food.selected[index].expiration
                                      : errors.food.selected}
                                  </p>
                                )}
                              </div>
                            );
                          }
                          return null;
                        })}
                      </div>
                    ));
                  }}
                </FieldArray>
              )}
              <button
                type="button"
                onClick={() => {
                  validateForm();
                }}
              >
                Validate
              </button>
</Form>