reactjs - 带有formik和yup的对象数组的Formik验证/错误

Question

我有一个表格，里面有一个数字网格。例如，每一行有四个值，我们有几行。在我的 initialValues 中，我将它们设置为：

interface Row {
  value1: number,
  value2: number,
  // ...etc
}

interface InitialValuesInterface {
  grid: Row[];
}

const initialValues: InitialValuesInterface = {
  grid: [...Array(6).keys()].map((row, index) => ({
    value1: 100,
    value2: 200,
    // ... etc
  })),
  ...otherValues
}

所以我们有一个包含 6 个对象的数组，每个对象有 4 个命名值。在我的验证中，我要求是的来验证表单的这一部分，如下所示：

const validationSchema = Yup.object().shape({
  grid: Yup.array().of(
    Yup.object().shape({
      value1: Yup.min(100, "Must be at least 100").etc(),
      value2: Yup.min(200, "Must be at least 200").etc(),
      // ...etc
    })
  )
})

在我的反应组件中，我记录了每次重新渲染的错误。使用formikProps = useFormikContext()，我可以得到formikProps.errors，当我测试这些错误时，我在控制台中看到一个错误对象，看起来与预期的一样：

// console.log(formikProps.errors) after triggering an error in the third row, second cell
{
  grid: Array(3)
    2:
      value2: "Must be at least 200"
}

按预期工作。但是，尝试在我的组件中访问此错误以进行错误处理（我想有条件地为任何给定的错误单元格呈现带有工具提示的错误图标），我遇到了错误。

{formikProps.values.grid.map((row, ind) => (
  <TableCell>
    <input 
      type="number"
      name="[${ind}].value2"
      onChange={formikProps.handleChange}
    />
    {formikProps.errors.grid[ind].value2 && // <-- problem here
      <SomeErrorIconWithMessage />
    }
  </TableCell>
))}

打字稿根本不喜欢这个。首先它告诉我该对象可能是未定义的。我不能这样做formikProps.errors.grid?[ind].value2，因为打字稿认为我正在启动一个三元运算符，当我想要条件检查时（即formikProps.errors?.grid- 工作正常）。我也试试这个（非常难看）：

{formikProps.errors.grid &&
 formikProps.errors.grid[ind] &&
 formikProps.errors.grid[ind].value2 &&
   (<SomeErrorIconWithMessage />)
}

但后来我得到一个 ts 错误说

Property 'value2' does not exist on type 'string | FormikErrors<Row>'.
  Property 'value2' does not exist on type 'string'.

问为什么打字稿假设这可能是一个字符串，而我的validationSchema专门将它键入为一个Row对象数组？我可以强制打字稿将其视为Row类型吗？

标签： reactjstypescriptvalidationformik