antd select如何禁止复选相同值

Question

const data = [
    {id:1, val:1},
    {id:2, val:2},
    {id:3, val:3},
    {id:4, val:4},
];
 <Form.List name="selectName">
    {(fields, { add, remove }) => (
        <>
        {fields.map(({ key, name, ...restField }) => (
            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                 <Form.Item
                    name={['gender', 'gender1']}
                    label="gender"
                 >
                    <Select>
                        {
                            data.map((item) => (
                                <Option key={item.id} value={item.val}>
                                    {item.val}
                                </Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
             </Space>
            )
        )}
        <Form.Item>
            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                添加
            </Button>
        </Form.Item>
         </>
    )}
</Form.List>

动态增减表单项，怎么禁止已经被选中的item.val不能再被选择

Answer 1

感觉你表述的有些问题，给的例子放到官方例子中也有点问题。
得到效果是：可以增删，但是会清空对应选中数据，可以选择但所有项目的选择值会相同。
如果你指的复选相同值是这个意思的话，是因为 name={['gender', 'gender1']}的name设置的问题，需要按照官方例子，数组中第一个值取name name={[name, 'gender1']}，这里的这个name实质上是指Form.List name="selectName"selectName字段对应的数组的索引，作用应该是将数据放到数组正确的位置中。

---

selectName字段希望得到一个数组里面是字符串类型的值
这种场景直接用Select的多选模式去做会更简单吧，Form.List更适合希望得到数组里面是对象的场景。

<Form.Item name="selectName" label="gender">
        <Select mode="multiple">
          {data.map((item) => (
            <Option key={item.id} value={item.val}>
              {item.val}
            </Option>
          ))}
        </Select>
      </Form.Item>

Form.List 将选中项从总的下拉选项中排除

      <Form.List name="selectName" shouldUpdate>
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name }) => (
              <Space
                key={key}
                style={{ display: 'flex', marginBottom: 8 }}
                align="baseline"
              >
                <Form.Item name={[name]} label="gender">
                  <Select>
                    {data
                      .filter(
                        (item) =>
                          !form.getFieldValue('selectName').includes(item.val)
                      )
                      .map((item) => (
                        <Option key={item.id} value={item.val}>
                          {item.val}
                        </Option>
                      ))}
                  </Select>
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
              >
                添加
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>