Formik Fields 的独特关键道具

Question

我正在像这样映射一些文本字段：

{
  AddVehicleFields.map(({formikRef, ...input}) => (
    <>
      <TextField
        key={formikRef}
        helperText={
          getIn(formik.touched, formikRef)
            ? getIn(formik.errors, formikRef)
            : ''
        }
        error={
          getIn(formik.touched, formikRef) &&
          Boolean(getIn(formik.errors, formikRef))
        }
        value={getIn(formik.values, formikRef)}
        {...input}
        variant="outlined"
        margin="normal"
        onChange={(props) => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />
      <br />
    </>
  ));
}

字段如下所示：

export const AddVehicleFields: Array<FormField> = [
  {
    id: 'freeSeats',
    name: 'freeSeats',
    formikRef: 'freeSeats',
    label: 'Free Seats',
  },

  {
    id: 'numberPlate',
    name: 'numberPlate',
    formikRef: 'numberPlate',
    label: 'Number Plate',
  },

我已经将 key 传递给每个元素，但我仍然得到 index.js:1 Warning: Each child in a list should have a unique "key" prop.我应该如何解决这个问题？

Answer 1

key 需要在 outer 最元素上。封装所有子项的那个。在本例中，它是一个 React 片段。所以把它改成这样：

        {AddVehicleFields.map(({ formikRef, ...input }) => (
          <React.Fragment key={formikRef}>
            <TextField
              helperText={
                getIn(formik.touched, formikRef)
                  ? getIn(formik.errors, formikRef)
                  : ''
              }
              error={
                getIn(formik.touched, formikRef) &&
                Boolean(getIn(formik.errors, formikRef))
              }
              value={getIn(formik.values, formikRef)}
              {...input}
              variant="outlined"
              margin="normal"
              onChange={props => {
                formik.handleChange(props);
                formik.handleBlur(props);
              }}
              onBlur={formik.handleBlur}
            />
            <br />
          </React.Fragment>
        ))}

Answer 2

您需要将子组件中的键移动到根组件

{
  AddVehicleFields.map(({formikRef, ...input}) => (
    // add key here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    <div key={formikRef}>
      <TextField
        helperText={
          getIn(formik.touched, formikRef)
            ? getIn(formik.errors, formikRef)
            : ''
        }
        error={
          getIn(formik.touched, formikRef) &&
          Boolean(getIn(formik.errors, formikRef))
        }
        value={getIn(formik.values, formikRef)}
        {...input}
        variant="outlined"
        margin="normal"
        onChange={(props) => {
          formik.handleChange(props);
          formik.handleBlur(props);
        }}
        onBlur={formik.handleBlur}
      />
      <br />
    </div>
  ));
}

Formik Fields 的独特关键道具

unique key props with Formik Fields

javascript

typescript

reactjs

formik