React中Select2多选下拉框从外部服务器取值后选中项不显示

这个问题我之前也碰到过——本质是Select2作为jQuery插件，它的DOM操作逻辑和React的虚拟DOM机制不兼容，导致React更新状态后，Select2自己生成的UI（就是你说的带关闭叉的选中栏）没跟上。下面给你一步步的解决方案：

核心原因 #

React通过虚拟DOM更新原生<select>的value属性后，Select2并不知道这个变化，因为它在初始化时已经把原生select隐藏，自己生成了一套独立的UI组件（包括顶部的选中标签栏）。这些自定义UI不会自动响应React的状态变更，必须通过Select2的官方API来触发更新。

解决方案步骤 #

1. 用Ref获取原生Select元素 #

不要依赖React的value绑定来同步选中状态，而是通过Ref直接拿到原生的<select>DOM节点，后续用Select2的API操作它。

2. 组件挂载时初始化Select2 #

在组件挂载完成后（类组件的componentDidMount，函数组件的useEffect）初始化Select2，确保DOM已经渲染完成。

3. 状态更新时调用Select2 API同步UI #

当从外部数据库拿到数据并更新React状态后，调用Select2的val()方法设置选中值，再触发change事件让Select2更新它的自定义UI。

4. 组件卸载时清理Select2 #

避免内存泄漏，组件卸载前要销毁Select2实例。

代码示例 #

类组件版本 #

import React, { Component, createRef } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.selectRef = createRef();
    this.state = {
      selectedValues: [],
      options: []
    };
  }

  componentDidMount() {
    // 初始化Select2
    $(this.selectRef.current).select2({
      placeholder: "请选择选项",
      allowClear: true
    });

    // 模拟从外部数据库获取数据
    this.fetchData();
  }

  fetchData = () => {
    // 替换成你的实际接口请求
    fetch('/api/get-form-data')
      .then(res => res.json())
      .then(data => {
        this.setState({
          options: data.options, // 下拉选项列表
          selectedValues: data.selectedIds // 从数据库拿到的选中ID数组
        });
      });
  };

  componentDidUpdate(prevProps, prevState) {
    // 当选中值状态变化时，同步更新Select2
    if (prevState.selectedValues !== this.state.selectedValues) {
      const $select = $(this.selectRef.current);
      $select.val(this.state.selectedValues).trigger('change');
    }
  }

  componentWillUnmount() {
    // 销毁Select2实例
    $(this.selectRef.current).select2('destroy');
  }

  render() {
    const { options } = this.state;
    return (
      <div>
        <select
          ref={this.selectRef}
          className="select2-multiple"
          multiple
        >
          {options.map(opt => (
            <option key={opt.id} value={opt.id}>
              {opt.name}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

export default MyForm;

函数组件版本（React Hooks） #

import React, { useRef, useEffect, useState } from 'react';

function MyForm() {
  const selectRef = useRef(null);
  const [selectedValues, setSelectedValues] = useState([]);
  const [options, setOptions] = useState([]);

  // 初始化Select2
  useEffect(() => {
    const $select = $(selectRef.current);
    $select.select2({
      placeholder: "请选择选项",
      allowClear: true
    });

    // 组件卸载时清理
    return () => {
      $select.select2('destroy');
    };
  }, []);

  // 同步选中状态到Select2
  useEffect(() => {
    if (selectRef.current) {
      const $select = $(selectRef.current);
      $select.val(selectedValues).trigger('change');
    }
  }, [selectedValues]);

  // 从外部数据库获取数据
  useEffect(() => {
    fetch('/api/get-form-data')
      .then(res => res.json())
      .then(data => {
        setOptions(data.options);
        setSelectedValues(data.selectedIds);
      });
  }, []);

  return (
    <div>
      <select
        ref={selectRef}
        className="select2-multiple"
        multiple
      >
        {options.map(opt => (
          <option key={opt.id} value={opt.id}>
            {opt.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default MyForm;

关键注意点 #

• 不要同时使用React的value属性和Select2的val()方法，这会导致状态冲突，让UI更混乱。
• 必须调用trigger('change')：Select2需要这个事件来重新渲染它的自定义UI组件，只调用val()不会更新顶部的选中栏。
• 确保数据加载完成后再同步：如果你的数据是异步获取的，一定要等selectedValues状态更新后再执行Select2的同步逻辑，上面的示例里用useEffect（类组件用componentDidUpdate）监听selectedValues变化已经处理了这个问题。

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