点击按钮添加React-Select下拉组件时concat报错、组件未渲染至DOM

现存代码的核心报错原因 #

• 未声明的变量引用：代码中使用了未定义的inputList、setInputList、setDropdown、遍历索引i、placeholder、isLanguageBlock、title等变量，直接触发运行时报错。
• 状态更新逻辑语法错误：handleSelectDropdownChange中list[value, label] = language使用了逗号运算符作为数组索引，实际只会取最后一个值作为数组下标，完全无法正确更新对应下拉项的选中值。
• 新增组件逻辑错位：handleAddClick内部写的<LanguageSelect />是孤立的JSX语句，既没有被return到渲染流程里，也没有独立的状态托管，哪怕状态更新成功也不会渲染到DOM中；同时单个组件内部递归调用自身的写法会导致所有下拉实例共享同一份状态，出现选中值串扰的问题。
• 状态命名不匹配：声明的状态变量是language，但操作时全程操作未定义的inputList，状态和操作对象完全脱节。

正确实现的核心逻辑 #

• 拆分组件职责：把单个下拉选择框的渲染、外层的列表状态管理拆分成两个独立组件，避免单个组件既维护自身值又管理全量列表的混乱逻辑。
• 统一在外层维护列表状态：用一个数组状态存所有下拉项的选中值，点击新增按钮时往数组末尾追加空的下拉项对象，渲染时遍历数组生成对应数量的Select组件。
• 按索引定位更新：修改某个下拉的选中值时，根据传入的索引定位数组中的对应项，替换成新的选中值后重新设置状态。
• 用函数式状态更新：新增下拉项时使用setInputList(prev => [...prev, newItem])的写法，避免闭包捕获旧状态导致的新增失效问题。

参考实现代码 #

import { useState } from 'react';
import Select from 'react-select';

// 单个语言下拉选择组件
const LanguageSelectItem = (props) => {
  const { options, name, title, selectedValue, onValueChange } = props;
  return (
    <div className="form-group">
      <label htmlFor={name} className="control-label">{title}</label>
      <div className="form-input-container">
        <Select
          className="profile-module-select-container"
          classNamePrefix="profile-module-select"
          options={options}
          value={selectedValue}
          onChange={(selected) => onValueChange(selected)}
        />
      </div>
    </div>
  )
}

// 支持动态新增的语言下拉组组件
const LanguageSelectGroup = (props) => {
  const { options, name, isLanguage, title } = props;
  // 存储所有下拉项选中值的状态
  const [inputList, setInputList] = useState([{ value: '', label: '' }]);

  // 处理单个下拉项的选中值变更
  const handleSelectDropdownChange = (selected, index) => {
    const updatedList = [...inputList];
    // 按索引替换对应位置的选中值
    updatedList[index] = selected;
    setInputList(updatedList);
  }

  // 点击新增按钮，追加一个空下拉项
  const handleAddClick = () => {
    setInputList(prevList => [...prevList, { value: '', label: '' }])
  }

  return (
    <div className="language-select-group-wrapper">
      {/* 遍历状态数组，渲染所有下拉项 */}
      {inputList.map((item, index) => (
        <LanguageSelectItem 
          key={index}
          options={options}
          name={`${name}-${index}`}
          title={title}
          selectedValue={item}
          onValueChange={(selected) => handleSelectDropdownChange(selected, index)}
        />
      ))}
      {/* 新增语言按钮区域 */}
      {isLanguage && (
        <div className="add-language-selection">
          <a 
            className="addLanguage" 
            id="addLanguage" 
            role="link" 
            onClick={handleAddClick} 
            tabIndex={0}
          >
            +Add Language
          </a> 
        </div>
      )}
    </div>
  )
}

实现注意事项 #

• 遍历渲染列表项时必须给每个项加唯一的key属性，避免React虚拟DOM复用错误导致的状态串扰、渲染错位问题。
• 动态操作数组状态时优先使用函数式更新的写法，防止闭包捕获到过期的状态值，导致新增、修改操作不生效。
• 不要在单个下拉组件内部通过递归调用自身实现新增功能，这种写法会导致所有下拉实例共享同一份组件状态，无法独立维护每个下拉的选中值。

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