React中循环useRef数组替换值及下拉框标题动态修改问题

首先，你不需要用useRef手动操作DOM来更新下拉框标题——React是数据驱动视图的框架，直接通过状态管理就能实现动态更新，手动操作DOM反而会和React的渲染流程冲突，导致状态与视图不同步。

核心修正方案： #

1. 用状态数组管理所有下拉框的标题和选项
   把每个下拉框的标题、选项数据存在状态数组里，比如：

   const [dropdownList, setDropdownList] = useState([
     { title: "请选择", options: ["选项A", "选项B", "选项C"] },
     { title: "请选择", options: ["选项1", "选项2", "选项3"] },
     // 更多下拉框配置
   ]);
   

2. 点击选项时更新对应下拉框的状态
   写一个处理选择的函数，通过索引找到对应的下拉框，更新它的标题值。注意必须返回新的数组（不能直接修改原状态数组），这样React才能检测到状态变化并重新渲染：

   const handleOptionSelect = (index, selectedValue) => {
     setDropdownList(prevList => {
       // 复制原数组，避免直接修改状态
       const newList = [...prevList];
       // 更新对应索引的下拉框标题
       newList[index].title = selectedValue;
       return newList;
     });
   };
   

3. 通过状态渲染下拉框标题
   循环渲染时直接用状态里的title值，不需要依赖useRef：

   {dropdownList.map((dropdown, index) => (
     <div key={index} className="dropdown-container">
       {/* 直接渲染状态中的标题 */}
       <div className="dropdown-title">{dropdown.title}</div>
       <div className="dropdown-options">
         {dropdown.options.map(option => (
           <div
             key={option}
             className="option-item"
             onClick={() => handleOptionSelect(index, option)}
           >
             {option}
           </div>
         ))}
       </div>
     </div>
   ))}
   

为什么之前的方法会出问题？ #

• useRef的.current值变化不会触发组件重新渲染，就算你修改了ref指向的DOM内容，状态里的标题值和视图也会逐渐脱节。
• 如果直接修改原状态数组（比如dropdownList[index].title = xxx后直接调用setDropdownList(dropdownList)），React会认为状态没有变化（因为数组引用没改），导致map渲染失效，组件不更新。

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