modal内动态新增的dropdown渲染及值同步异常问题咨询

你遇到的两个异常本质都是状态绑定和渲染逻辑的问题：

• 所有组的第一个下拉框共用了同一个状态变量存储取值，修改任意一个都会触发全局同步更新
• 同组两个下拉框的onChange逻辑配置错误，两个下拉的选择操作都只会更新第一个下拉绑定的状态，导致第二个下拉无回显、还会覆盖第一个的取值
• 动态生成的下拉组未配置唯一标识，React DOM diff时无法正确区分不同控件，进一步加剧了状态错位的问题

1. 调整状态存储结构 #

将原本扁平的2个状态变量，改为数组结构存储所有下拉组的取值，每组的两个下拉取值独立存储：

import { useState } from 'react'

// 初始默认保留第一组空值
const [dropdownGroups, setDropdownGroups] = useState([
  { firstSelect: '', secondSelect: '' }
])

2. 重写下拉框的绑定逻辑 #

渲染下拉组时按数组下标匹配对应状态，修改时仅更新对应下标对应字段的取值：

// 下拉值更新逻辑
const handleSelectChange = (groupIndex, field, value) => {
  const newGroups = [...dropdownGroups]
  newGroups[groupIndex][field] = value
  setDropdownGroups(newGroups)
}

// 渲染逻辑
return dropdownGroups.map((group, index) => (
  // 生产环境建议用唯一ID代替数组下标作为key，避免列表重排时出现异常
  <div key={index}>
    <Dropdown
      value={group.firstSelect}
      onChange={(val) => handleSelectChange(index, 'firstSelect', val)}
      // 其余原有属性保留
    />
    <Dropdown
      value={group.secondSelect}
      onChange={(val) => handleSelectChange(index, 'secondSelect', val)}
      // 其余原有属性保留
    />
  </div>
))

3. 调整「添加更多」按钮逻辑 #

点击新增时直接往状态数组里推入一组新的空值即可：

const handleAddMore = () => {
  setDropdownGroups([
    ...dropdownGroups,
    { firstSelect: '', secondSelect: '' }
  ])
}

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