antd formList 这个key怎么一直提示我重复？

Question

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useSearchParams } from '@umijs/max';
import { Button, Divider, Form, Input, message } from 'antd';
import React, { useEffect } from 'react';
import './index.less';

const { Search } = Input;
type MinorType = {
  img: string;
  title: string;
  sort: string;
};
const Add: React.FC = () => {
  // 获取url参数id
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      helpImageInfo: [{ key: 'xx11' }],
    });
  }, []);

  // 提交表单
  const onFinish = () => {
    form
      .validateFields()
      .then((values) => {
        console.log(values);
      })
      .catch((err) => {
        message.error('请完善信息');
      });
  };
  return (
    <PageContainer title={id ? '修改产品' : '新增产品'}>
      <Form
        name="basic"
        autoComplete="off"
        layout="horizontal"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 10 }}
        form={form}
        onFinish={onFinish}
      >
        <Form.List name="helpImageInfo">
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, index) => (
                // TODO key重复 不知道为啥 气死我了
                <div
                  key={field.key + 'helpImageInfo'}
                  style={{
                    position: 'relative',
                  }}
                >
                  <Form.Item
                    {...field}
                    label="产品详情页辅图"
                    name={[field.name, 'img']}
                    rules={[
                      { required: true, message: '请输入产品详情页辅图' },
                    ]}
                    shouldUpdate
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    {...field}
                    label="辅图位置"
                    name={[field.name, 'sort']}
                    rules={[{ required: true, message: '请输入辅图位置' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    label="辅图标题"
                    name={[field.name, 'title']}
                    rules={[{ required: true, message: '请输入辅图标题' }]}
                  >
                    <Input />
                  </Form.Item>
                  <div
                    style={{
                      position: 'absolute',
                      top: '50%',
                      left: '65%',
                      transform: 'translateY(-50%)',
                      fontSize: '24px',
                      color: '#999',
                    }}
                  >
                    {index > 0 && (
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    )}
                    <br />
                    <PlusOutlined
                      onClick={() => {
                        add();
                      }}
                    />
                  </div>
                </div>
              ))}
            </>
          )}
        </Form.List>
      </Form>
      <Divider />

      <div
        style={{
          textAlign: 'center',
          margin: '20px',
        }}
      >
        <Button
          className="mr-10"
          onClick={() => {
            history.back();
          }}
        >
          返回
        </Button>
        <Button type="primary" className="ml-10" onClick={onFinish}>
          提交
        </Button>
      </div>
    </PageContainer>
  );
};

export default Add;

实在是不知道哪里错了？

解决了，但是这样写不是一样的吗？ 解构出来就不提示key重复了，不知道为啥

Answer 1

噢噢噢噢。我知道原因了，自己犯蠢了

 <Form.Item
                    {...field}
                    label="产品详情页辅图"
                    name={[field.name, 'img']}
                    rules={[
                      { required: true, message: '请输入产品详情页辅图' },
                    ]}
                    shouldUpdate
                  >
                    <Input />
                  </Form.Item>

我再formItem 里面写的 {...field} ，fileld 里面有key name resetFiled ，这样我每个formItem 都有同样的key了，然后react就会提示key重复。就这样简单。。。。。。。。

Answer 2

Form.List 应该会自动处理每个字段的 key，是你手动加的原因

useEffect(() => {
  form.setFieldsValue({
    helpImageInfo: [{ img: '', title: '', sort: '' }],
  });
}, []);