Formik FieldArray使用Yup嵌套对象验证

Question

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

上面，我添加了一些我试图弄清楚的问题的示例代码。我不知道如何将错误映射到FieldArray中的正确项目。

在这个例子中，有"是/否"单选按钮，用户可以指示他们是否有想要添加的食物。如果他们选择"是"，则会显示食物选项，并且他们必须至少选择其中一种食物，并输入其有效期以完全验证。

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

感谢您的帮助！

注：

只有当点击验证按钮时才会触发验证

Answer 1

下面显示了代码沙盒和代码：

<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>