为Formik映射TextField设置key仍报错，如何解决？

嗨，这个问题我之前踩过坑！你虽然给TextField加了key，但问题出在你包裹元素的Fragment上——React要求列表中每个子项的最顶层节点必须带有唯一key，而你用的短语法<>（匿名Fragment）是没法直接加key的，导致React还是识别不到每个列表项的唯一标识，所以警告依然存在。

解决方案：给Fragment加上key #

把匿名的<>换成完整的<React.Fragment>，并把key属性移到这个Fragment上（用你的formikRef作为key值就很合适，因为它本身就是唯一的）：

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

为什么这样能解决？ #

React在比对列表元素时，只会识别每个列表项最外层元素的key。你之前把key加在内部的TextField上，而外层的匿名Fragment没有key，对于React来说，这就相当于列表里的每个子项都是“无标识的容器”，自然会触发警告。把key移到顶层的Fragment上后，React就能正确区分每个列表项了。

另外，如果你不需要额外的Fragment包裹，也可以直接把<br/>和TextField放在一个容器里（比如<div>），并给这个容器加key，不过用Fragment的方式不会额外增加DOM节点，更推荐这种做法。

内容的提问来源于stack exchange，提问作者user13101751