如何在React Dual Listbox的右侧表中展示预填充数据？

核心问题排查方向 #

预填充不生效90%以上的场景都是selected数组元素和options的value属性不匹配，或者异步数据获取后没有正确触发组件重渲染导致的，可按以下步骤实现：

1. 保证数据结构完全匹配 #

传给组件的options数组中每个元素的value值，必须和selected数组的元素完全相等（包括数据类型）：

// options 示例，value 为数字类型
const options = [
  { value: 1, label: '张三' },
  { value: 2, label: '李四' },
  { value: 3, label: '王五' }
]
// selected 数组元素必须和 value 类型完全一致，不能用字符串 "2" 代替数字 2
const [selected, setSelected] = useState([2, 3])

典型错误场景：options的value是数字类型，接口返回的选中项ID是字符串类型，双列表框匹配不到对应选项，就不会渲染到右侧已选区，统一类型即可修复。

2. 异步获取预填充数据的正确写法 #

你需要在接口请求完成后再给selected赋值，同时通过useState触发组件重渲染，完整示例如下：

import { useState, useEffect } from 'react'
import DualListBox from 'react-dual-listbox'
// 必须引入样式文件，否则会出现渲染异常
import 'react-dual-listbox/lib/react-dual-listbox.css'

const EmployeeUpdateForm = () => {
  const [options, setOptions] = useState([])
  const [selected, setSelected] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const initFormData = async () => {
      try {
        // 1. 获取所有可选员工列表
        const employeeList = await api.get('/employee/all')
        setOptions(employeeList.map(item => ({
          value: item.id,
          label: item.name
        })))
        // 2. 获取用户之前提交的选中员工列表
        const savedSelected = await api.get('/employee/prev-selected')
        // 直接赋值给selected，注意元素类型和上面的value保持一致
        setSelected(savedSelected.map(item => item.id))
      } catch (err) {
        console.error('数据加载失败', err)
      } finally {
        setLoading(false)
      }
    }
    initFormData()
  }, [])

  const handleFormSubmit = () => {
    // 提交表单时直接取selected数组即可
    api.post('/employee/update', { selectedEmployees: selected })
  }

  if (loading) return <div>加载中...</div>

  return (
    <div className="form-container">
      <DualListBox
        options={options}
        selected={selected}
        onChange={setSelected}
      />
      <button onClick={handleFormSubmit}>提交更新</button>
    </div>
  )
}

3. 其他排错点 #

• 确认你使用的是稳定版组件，属性名没有写错，当前版本受控属性为selected而非value
• 不要直接修改selected数组，必须通过setSelected触发重渲染，直接改数组不会更新组件
• 如果选中值实际正确但看不到内容，优先检查是否正确引入了组件的css文件

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