如何为Ant Table表格列添加唯一的Autocomplete实例？

所有行的Autocomplete组件共用了同一个全局状态valueAutocomplete，任意一行的修改都会触发全局状态更新，导致所有Autocomplete组件同步渲染同一个值。

推荐两种常用的实现方案，按需选择即可：

方案1：状态存储在表格数据源中（推荐） #

直接将每行的Autocomplete值存入表格的dataSource对应项中，和行数据绑定：

1. 初始化dataSource时，给每一行新增专属的autoCompleteValue字段，初始值可设为空字符串或对应行的默认值
2. 修改列的render逻辑，绑定当前行的专属状态，同时在事件回调中传入当前行的唯一标识（如id、uuid）
   修改后的列配置代码如下：

{
  title: 'uuid',
  key: 'uuid',
  dataIndex: 'uuid',
  render: (text, record) => {
    return <AutoComplete 
      value={record.autoCompleteValue}
      options={optionsAutocomplete}
      style={{ width: 200 }}
      onSelect={(value) => handleSelect(value, record.uuid)}
      onSearch={(value) => handleSearch(value, record.uuid)}
      onChange={(value) => handleChange(value, record.uuid)}
    />
  }
}

3. 编写状态更新逻辑，只修改对应行的字段值：

const handleChange = (value, rowUuid) => {
  setDataSource(prevDataSource => {
    return prevDataSource.map(item => {
      if (item.uuid === rowUuid) {
        return {...item, autoCompleteValue: value}
      }
      return item
    })
  })
}

onSelect、onSearch的逻辑可以参照onChange的写法，根据业务需求调整即可。

方案2：单独存储行状态 #

如果不想修改原始的dataSource结构，可以用对象/Map单独存储所有行的Autocomplete值：

1. 声明单独的状态存储：

const [autoCompleteValueMap, setAutoCompleteValueMap] = useState({})

2. 绑定值的时候取对应行的状态：

value={autoCompleteValueMap[record.uuid] ?? ''}

3. 更新逻辑：

const handleChange = (value, rowUuid) => {
  setAutoCompleteValueMap(prev => ({
    ...prev,
    [rowUuid]: value
  }))
}

• 必须保证行唯一标识（如uuid、id）全局唯一，才能正确区分不同行的状态
• 如果需要每行的Autocomplete选项不同，也可以用相同的思路按行标识存储对应选项列表

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