formik - 对象属性错误和打字稿问题

Question

如何访问对象属性错误？我有这个数组：

  cars: array()
        .of(
            object({
                brandId: number().positive().required(),
                name: string(),
            }),
        )

如果用户选择特定品牌，比如说品牌 A，那么我想将“名称”属性设为必需。

通常它是一个带有复选框的表单，每个复选框都有自己的输入。因此，对于复选框一，我有品牌 A，当我检查带有品牌 A 的复选框时，我希望该复选框的输入是必需的，但其他复选框的其他输入不应是必需的。如何实现这一点，如何单独验证每个对象？

编辑：验证工作正常。现在我有来自 MUI 库的输入：

<TextField
error={errors.cars ? true : false}
helperText={errors.cars}
.
.
.
/>

当我单击“提交”按钮时，出现错误：

未捕获类型错误：key.indexOf 不是函数

我的目标是用帮助文本标记此特定输入。 FE “此字段是必需的”。我的第一个想法是访问“name”属性的错误，如下所示：

errors.cars.name

然后我得到了一个答案，我应该这样做：

errors.cars[0].name

但它给了我一个打字稿错误：

类型“string”上不存在属性“name”。ts(2339)

“汽车”对象数组如下所示：

[
 {
  brandId: 1,
  name: null
 },
 {
  brandId: 2,
  name: null
 },
]

假设品牌 1 要求“名称”属性不能为空字符串 - 我如何访问该属性的该对象的错误？

Answer 1

如果

when

等于例如，您可以使用

brandId

设置条件

3

，

name

属性成为必需的。

https://codesandbox.io/s/yup-playground-forked-3d3t6c?file=/src/index.js

import * as yup from "yup";

const schema = yup.object().shape({
  cars: yup.array().of(yup.object({
        brandId: yup.number().positive().required(),
        name: yup.mixed().when('brandId', {
          is: 3,
          then: yup.string().required(),
        })
    })),
  });
  
const obj1 = { cars: [{ brandId: 5 }] }; // valid
const obj2 = { cars: [{ brandId: 3 }] }; // invalid, name is required