关于 Formik 的反应抛出错误应该在每个中都有一个唯一的键

Question

我有一个具有字段道具的组件，这个每个道具 map 在 Formik 中呈现。

但是反应会抛出错误。

反应抛出这样的错误：

警告：列表中的每个孩子都应该有一个独特的“关键”道具。

检查FieldArrayInner的渲染方法。 有关详细信息，请参阅https://reactjs.org/link/warning-keys 。

我的代码如下 -->

 <Formik
          initialValues={initialValues}
          onSubmit={onSubmit}
          validate={validate}
        >
          {({ values, handleSubmit, handleChange, errors }: formikProps) => (
            <form
              onSubmit={handleSubmit}
              className={`space-y-4 sm:space-y-0 ${
                formType === "login"
                  ? ""
                  : "sm:grid sm:grid-cols-2 sm:grid-rows-[auto_auto_auto_auto_auto_40px]"
              } flex flex-col  gap-4`}
            >
              <FieldArray
                name="fields"
                render={() => (
                  <>
                    {fields.map((field, index) => (
                  // I puted id here
                      <div key={index}>
                        <label
                          htmlFor={field.name}
                          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                        >
                          {field.label}
                        </label>
                        {field.options && (
                          <select
                            name={field.name}
                            value={values[field.name]}
                            onChange={handleChange}
                            className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            data-testid={`${field.name}-input`}
                          >
                            {field.options.map((option) => (
                              <option value={option.value}>
                                {option.label}
                              </option>
                            ))}
                          </select>
                        )}
                        {!field.options && (
                          <input
                            type={field.type}
                            name={field.name}
                            value={values[field.name]}
                            onChange={handleChange}
                            placeholder={field.placeholder}
                            className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            data-testid={`${field.name}-input`}
                          />
                        )}
                        {errors[field.name] && (
                          <div className="text-red-500 text-xs italic">
                            {errors[field.name]}
                          </div>
                        )}
                      </div>
                    ))}
                  </>
                )}
              />
              <Button type="submit" className="w-full col-span-2">
                {submitLabel}
              </Button>
              <span className="text-xs text-gray-500 dark:text-gray-400">
                {message}
              </span>
            </form>
          )}
        </Formik>

interface FormProps {
  ...
  fields: {
    name: string;
    label: string;
    type?: string;
    placeholder?: string;
    options?: { value: string; label: string }[];
  }[];
 ...
}

谢谢你的信息。

Answer 1

这与field.options.map有关，每个被映射的项目都必须有一个唯一的键

所以只需像这样添加它：

{field.options.map((option,index) => (
                              <option key={index} value={option.value}>
                                {option.label}
                              </option>
                            ))}