reactjs - Formik validering/fel av array av objekt med Formik och Yup

Jag har ett formulär som har ett rutnät av nummer. Varje rad har till exempel fyra värden, och vi har flera rader. I mina initialValues ställer jag in dem så här:

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
}

Så vi har en array med 6 objekt, varje objekt har 4 namngivna värden. I min validering ber jag yup att validera den här delen av formuläret på följande sätt:

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

I min React-komponent loggar jag felen vid varje omrendering. Genom att använda formikProps=useFormikContext() kan jag få formikProps.errors, och när jag testar dessa fel ser jag ett felobjekt i konsolen som ser ut som förväntat:

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

Fungerar som förväntat. Men när jag försöker få åtkomst till detta fel i min komponent för felhantering (jag vill villkorligt rendera en felikon med en verktygstips för vilken som helst felaktig cell), stöter jag på fel.

{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>
))}

Typescript gillar det här inte alls. Först säger det till mig att objektet eventuellt är odefinierat. Jag kan inte göra formikProps.errors.grid?[ind].value2 eftersom Typescript tror att jag initierar en ternär operator, när jag vill ha en villkorskontroll (t.ex. formikProps.errors?.grid - det fungerar bra). Jag försöker detta också (mycket fult):

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

Men sedan får jag ett ts-fel som säger

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

Q Varför antar TypeScript att detta kan vara en sträng, när mitt validationSchema specifikt anger att det är en array av Row-objekt? Kan jag tvinga TypeScript att behandla detta som typen Row?

Relaterade artiklar