Antd多选组件选择选项时弹窗自动关闭问题排查与解决

这个问题通常由以下几个核心原因导致，对应解决方案如下：

一、可能的原因 #

1. Next.js 13 App Router下未标记客户端组件 #

Next.js 13的App Router中组件默认是服务器组件，而使用useState、onChange这类客户端交互API的组件必须添加'use client'指令。如果弹窗或多选组件没加这个指令，状态更新会触发组件异常重渲染，直接导致弹窗关闭。

2. 弹窗显示状态被意外重置 #

如果控制弹窗显示的状态（比如isModalOpen）和selectedUsers在同一组件中，且状态定义或更新逻辑有误，比如把弹窗状态的初始值写在渲染逻辑里而非useState，每次selectedUsers更新触发重渲染时，弹窗状态会被重置为false。

3. 组件key不稳定导致重新挂载 #

如果弹窗或多选组件的key依赖selectedUsers这类动态变化的状态，每次选择选项时组件会被强制重新挂载，弹窗自然会关闭。

4. 受控组件配置冲突 #

多选组件的Select同时设置了defaultValue和value，受控模式下这两个属性共存可能引发状态冲突，导致组件异常行为。

二、解决方案 #

1. 标记客户端组件 #

在所有使用客户端交互逻辑的组件顶部添加'use client'指令：

• 包含setSelectedUsers的弹窗父组件
• MultiSelect组件本身

修改MultiSelect组件：

'use client';
import React from 'react';
import { Select } from 'antd';

const { Option } = Select;

const MultiSelect = ({ items, selectedItems, onChange, placeholder, size="middle", labelOutside }) => {
  const handleChange = (value) => {
    onChange(value);
  };
  return (
    <div style={{ width: '100%', maxWidth: '400px', margin: '0 auto' }}>
      {labelOutside && <label>{placeholder}</label>}
      <Select
        className='mt-2'
        mode="multiple"
        size={size}
        placeholder={placeholder}
        value={selectedItems}
        onChange={handleChange}
        style={{ width: '100%' }}
      >
        {items.map(item => (
          <Option key={item.id} value={item.name}>{item.name}</Option>
        ))}
      </Select>
    </div>
  );
};

export default MultiSelect;

2. 检查弹窗状态的正确定义 #

确保弹窗的显示状态通过useState正确声明，且仅在打开/关闭操作时修改：

'use client';
import { useState } from 'react';
import { Modal } from 'antd';
import MultiSelect from './MultiSelect';

const UserSelectionModal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState([]);
  const users = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; // 示例数据

  const showModal = () => setIsModalOpen(true);
  const handleOk = () => setIsModalOpen(false);
  const handleCancel = () => setIsModalOpen(false);

  const handleSelectionChange = (selectedItemNames) => {
    const updatedSelection = users.filter(user => selectedItemNames.includes(user.name));
    setSelectedUsers(updatedSelection);
  };

  return (
    <>
      <button onClick={showModal}>打开选择弹窗</button>
      <Modal
        title="选择用户"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <MultiSelect
          items={users}
          selectedItems={selectedUsers.map(user => user.name)}
          onChange={handleSelectionChange}
          placeholder="选择用户"
          labelOutside={true}
        />
      </Modal>
    </>
  );
};

export default UserSelectionModal;

3. 使用稳定的组件key #

确保弹窗或多选组件的key值固定，不要依赖动态变化的状态：

// 错误示例：key依赖动态状态
<Modal key={selectedUsers.length} ...>

// 正确示例：使用固定字符串key
<Modal key="user-selection-modal" ...>

4. 清理受控组件的冲突配置 #

移除Select组件中的defaultValue，因为受控模式下只需要value即可：

// 原代码（冲突）
<Select
  defaultValue={selectedItems}
  value={selectedItems}
  ...
>

// 修改后（仅保留受控value）
<Select
  value={selectedItems}
  ...
>

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