react AutoComplete options 允许重复下拉数据；解决下拉数据有相同时滚动后数据全部重复问题；

问题：1、下拉数据有相同时滚动后数据全部重复；

2、允许下拉框出现相同数据，如下图

解决：

直接在value中加一个id；lable不变；

分析：

由于我这个下拉框本事是通过截取后端传的数据进行拼接的，所以可以直接在value后添加一个id；

value不显示，label才是显示项

const lable = `${item.materialCode || ''}，原料名称：${item.materialName || ''}，入库批号：${item.materialBatch || ''}，原料规格：${item.materialSpec || ''}，库存：${item.sum || ''}；`;
const value = `${item.materialCode || ''}，原料名称：${item.materialName || ''}，入库批号：${item.materialBatch || ''}，原料规格：${item.materialSpec || ''}，库存：${item.sum || ''}，${item.id}`;
       

完整代码：

import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Row, message, AutoComplete, Select } from 'antd';
import css from '@/assets/css/frame/frame.module.less';
import { getBody, postBody, putBody } from '@/service/request';
import DateInput from '@/components/framework/date/DateInput';
import ApiCosmetic from '@/service/apiCosmetic';
import { layoutLabelCol, layoutWrapperCol } from '@/utils/tools';
import { CustomInput } from '@/components/framework/input/CustomInput';

const { Option } = Select;

const MaterialOutEdit = (props) => {
  const { data = {}, onSubmit } = props;
  const { id } = data;

  const [form] = Form.useForm();
  const size = 'middle'; // 下拉框、autoComplete、按钮的大小
  const [options, setOptions] = useState([]); // 自动联想条目
  const [numVal, setNumVal] = useState([]); // 原数量

  // 获取数据
  const getInfoById = () => {
    getBody(ApiCosmetic.material.out.get, id).then((res) => {
      if (res) {
        const d = res.data;
        form.setFieldsValue(d);
        setNumVal(res.data.num);
      }
    });
  };

  // 提交
  const onClick = () => {
    form.validateFields()
      .then((value) => {
        const url = id ? ApiCosmetic.material.out.update : ApiCosmetic.material.out.add;
        const { sum, num } = value;
        if (id) {
          if ((num * 1) > ((sum * 1) + (numVal * 1))) {
            return message.error('出库数量不能大于库存！');
          }
          // 更新
          putBody(url, { id, ...value })
            .then((r) => !r || onSubmit())
            .catch((r) => r && message.error(r.msg));
        } else {
          if (num * 1 > sum * 1) {
            return message.error('出库数量不能大于库存！');
          }
          // 新增
          postBody(url, { ...value })
            .then((r) => !r || onSubmit())
            .catch((r) => r && message.error(r.msg));
        }
      })
      .catch((err) => window.console.log(err));
  };

  useEffect(() => {
    if (id) {
      getInfoById();
    }
  }, []);
  // 移动类型下拉框
  const onGenderChange = (value) => {
    form.setFieldsValue({ flowType: value });
  };

  // 原料编码补全
  const materialCodeSearch = (value) => {
    if (value) {
      getMaterialCodeCmp(value);
    }
  };

  // 原料编码补全接口
  const getMaterialCodeCmp = (curVal) => {
    getBody(ApiCosmetic.material.in.listFlowIn, { materialCode: curVal }).then((r) => {
      const arrStr = [];
      if (r.data) {
        r.data.forEach((item) => {
          const yy = `${item.materialCode || ''}，原料名称：${item.materialName || ''}，入库批号：${item.materialBatch || ''}，原料规格：${item.materialSpec || ''}，库存：${item.sum || ''}；`;
          const value = `${item.materialCode || ''}，原料名称：${item.materialName || ''}，入库批号：${item.materialBatch || ''}，原料规格：${item.materialSpec || ''}，库存：${item.sum || ''}，${item.id}`;
          arrStr.push({
            ...item,
            value,
            label: yy,
            id: item.id,

          });
        });

        if (arrStr?.length > 0) {
          setOptions(arrStr);
        } else {
          setOptions([]);
        }
      }
    }).catch((r) => r && message.error('接口错误'));
  };
  const codeOnChange = (value, option) => {
    if (option && option?.value) {
      form.setFieldsValue({
        ...option,
        flowId: option.id,
      });
    } else {
      form.setFieldsValue({
        materialName: '',
        materialBatch: '',
        materialSpec: '',
        sum: '',
        unit: '',
        flowId: '',
      });
    }

    // setSumVal(sum);
  };

  return (
    <div className={css.form_box}>
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              name="flowId"
              key="flowId"
              style={{ display: 'none' }}>
              <CustomInput />
            </Form.Item>
            <Form.Item
              name="materialCode"
              key="materialCode"
              label="原料编码"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入原料编码',
              }]}>
              {/* <CustomInput placeholder="请输入原料编码" /> */}
              <AutoComplete
                size={size}
                disabled={id}
                dropdownMatchSelectWidth={450}
                // allowClear
                dropdownClassName={css.dropdown_align}
                options={options}
                // onChange={codeOnChange(value)}
                onChange={(value, option) => codeOnChange(value, option)}
                onSearch={materialCodeSearch}
                placeholder="请输入原料编码" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="materialName"
              key="materialName"
              label="原料名称"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入原料名称',
              }]}>
              <CustomInput disabled placeholder="请输入原料名称" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="materialBatch"
              key="materialBatch"
              label="入库批号"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入入库批号',
              }]}>
              <CustomInput disabled placeholder="请输入入库批号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="materialSpec"
              key="materialSpec"
              label="原料规格"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}>
              <CustomInput disabled placeholder="请输入原料规格" />
            </Form.Item>
          </Col>

        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="sum"
              key="sum"
              label="原料库存"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                // required: true,
                message: '请输入原料库存',
              }]}>
              <CustomInput maxLength={10} disabled placeholder="请输入原料库存" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="flowType"
              key="flowType"
              label="移动类型"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入移动类型',
              }]}>
              <Select placeholder="请选择移动类型" onChange={onGenderChange}>
                <Option value="02">生产出库</Option>
                <Option value="04">报废出库</Option>
                <Option value="07">实验出库</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="num"
              key="num"
              label="数量"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                pattern: new RegExp(/^[0-9]+\.{0,1}[0-9]*$/),
                required: true,
                message: '请输入正确的数量',
              }]}>
              {/* <CustomInput onChange={(e) => numSize(e)} placeholder="请输入数量" /> */}
              <CustomInput maxLength={10} style={{ width: '100%' }} placeholder="请输入数量" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="unit"
              key="unit"
              label="单位"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入单位',
              }]}>
              <CustomInput disabled placeholder="请输入单位" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              name="accountTime"
              key="accountTime"
              label="出库时间"
              labelCol={layoutLabelCol}
              wrapperCol={layoutWrapperCol}
              rules={[{
                required: true,
                message: '请输入入库时间',
              }]}>
              <DateInput format="YYYY-MM-DD HH:mm:ss" showTime />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div className={css.form_btn_group}>
        <Button type="primary" onClick={onClick} style={{ marginRight: 10 }}>提交</Button>
        <Button onClick={onSubmit}>关闭</Button>
      </div>
    </div>
  );
};

export default MaterialOutEdit;