React Table 如何为每一行独立配置State实现行级下拉值单独更新

当前实现的串值问题完全来自两点：

• 所有行的下拉标题都绑定了同一个全局状态this.state.statusAction，任意行触发选择时更新的都是这个公共值，自然所有行的显示会同步变更
• 下拉菜单、下拉按钮的渲染逻辑被抽到了表格行遍历的外层，没有和当前遍历的行绑定上下文，选择事件触发时根本没法区分操作来源是哪一行

因为你的代码是React类组件写法，下面两种方案都可以直接适配现有逻辑：

方案1：用行唯一ID做键，把行级状态存在父组件全局State里 #

这种方式适合动态表格行由接口返回、没有固定行数的场景，不需要额外拆分子组件。

1. 首先改造State的结构，不要只存一个公共的statusAction字符串，改成以行唯一ID为键的映射对象，初始化参考：

   this.state = {
     tableData: [], // 接口返回的动态行数据，每一项携带全局唯一的rowId
     rowStatusMap: {} // 结构为 { rowId: 当前行的下拉选中值 }
   }
   

2. 改造选择事件处理函数，接收传入的行ID和选中值，只更新对应行的状态，不影响其他行：

   onStatusChange = (eventKey, rowId) => {
     // 因为你之前拼接了"data-下标"的eventKey格式，拆分后拿到实际选中的状态值
     const selectedValue = eventKey.split('-')[0]
     this.setState(prevState => ({
       rowStatusMap: {
         ...prevState.rowStatusMap,
         [rowId]: selectedValue
       }
     }))
   }
   

3. 把下拉的渲染逻辑移动到表格行的遍历循环内部，给每个下拉绑定当前行的上下文：

   // 遍历接口返回的表格数据渲染行
   {this.state.tableData.map(row => (
     <tr key={row.rowId}>
       {/* 其他表格列省略 */}
       <td>
         <DropdownButton
           id={`schemaType-${row.rowId}`} // 每个下拉的id必须唯一，避免DOM串用
           key={`schemaTypeDropdown-${row.rowId}`}
           bsStyle="default"
           title={this.state.rowStatusMap[row.rowId] || '请选择状态'} // 取当前行对应的选中值
           className="mr-3">
           {["Approve", "Reject"].map((data, i) => (
             <MenuItem
               eventKey={data + "-" + i}
               key={"status-" + i}
               onSelect={(eventKey) => this.onStatusChange(eventKey, row.rowId)}>
               {data}
             </MenuItem>
           ))}
         </DropdownButton>
       </td>
     </tr>
   ))}
   

方案2：抽离独立的行下拉子组件，每个组件实例维护独立State #

如果下拉的交互逻辑比较复杂，不想把所有行的状态都堆在父组件里，可以把单一行的下拉拆成独立的类组件，每个行的下拉都是一个独立的组件实例，状态天然隔离：

1. 写独立的行下拉组件：

   class RowStatusDropdown extends React.Component {
     // 每个组件实例自己维护自己的选中状态，和其他行完全隔离
     state = {
       currentStatus: '请选择状态'
     }
     handleSelect = (eventKey) => {
       const selectedValue = eventKey.split('-')[0]
       this.setState({ currentStatus: selectedValue })
       // 如果需要把选中值同步给父组件做表单提交，就调用props传入的回调
       this.props.onStatusChange?.(selectedValue, this.props.rowId)
     }
     render() {
       return (
         <DropdownButton
           id={`schemaType-${this.props.rowId}`}
           bsStyle="default"
           title={this.state.currentStatus}
           className="mr-3">
           {["Approve", "Reject"].map((data, i) => (
             <MenuItem
               eventKey={data + "-" + i}
               key={"status-" + i}
               onSelect={this.handleSelect}>
               {data}
             </MenuItem>
           ))}
         </DropdownButton>
       )
     }
   }
   

2. 在表格行遍历的位置直接使用这个独立组件即可：

   {this.state.tableData.map(row => (
     <tr key={row.rowId}>
       <td>
         <RowStatusDropdown 
           rowId={row.rowId}
           onStatusChange={(val, rowId) => {
             // 父组件在这里收集所有行的选中值，供后续提交使用
           }}
         />
       </td>
     </tr>
   ))}
   

• 不要给所有下拉设置相同的id属性，浏览器会识别为同一个DOM元素，导致下拉展开、选中行为完全串扰，每个下拉的id、key都要拼接当前行的唯一标识
• 不要在表格行的遍历循环外，把下拉的渲染逻辑抽成没有上下文的公共常量，否则所有循环渲染出来的下拉都会引用同一个变量，行为完全一致
• 更新State时不要直接修改原状态对象，必须通过展开运算符生成新的状态对象，否则React无法检测到状态变更，不会触发组件重渲染

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