antd表格可编辑列Select无值时显示空选项如何解决

问题现象 #

基于antd实现表格行内编辑功能时，Module列编辑态渲染mode="multiple"的多选Select组件，当后端未返回Description字段有效值时，Select会渲染出多余的空选项标签，字段有正常数组值时显示无异常。

问题代码片段 #

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          records:[],  
        } 
    }
    .....
    render() {
      const columns = [
        {
          title: 'ID',
          dataIndex: 'ID',
          key: 'ID',
          sorter: (a, b) => a.ID - b.ID,
          render: (val)=><div title={val} className="text_overlap">{val}</div>
        },{
          title: 'Module',
          dataIndex: 'Description',
          key: 'Description',
          sorter: false,
          render: (val, record, index) => <div title={'Module: ' + val} className="text_overlap d-flex">
               
                {record.IsEdit ? <Select mode="multiple"
                style={{ width: '80%' }}
                value={this.state.descr}
                placeholder="Please select"
                onChange={(e) => {this.setState({set:true, descr:e});}}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                {this.state.Modules && this.state.Modules.map((d) => <Select.Option value={d.Description}>{d.Description}</Select.Option>)}
              </Select>  : <div style={{maxWidth:'90%',overflow:'hidden', textOverflow:'ellipsis'}}>{val && val.join(', ')}</div>}
              {!record.IsEdit && <div className="mx-2" style={{ cursor: 'pointer' }} title="Edit" onClick={() => { this.doEdit(record,index); this.setState({descr:record.Description}) }}><i className="fa fa-edit" style={{  fontSize:17, marginTop: 0 }}></i></div>}
              {record.IsEdit && <div className="mx-2 pt-1" style={{ cursor: 'pointer' }} title="Save" onClick={() => { this.updateRecord(record); this.setState({descr:''}) }}><i style={{fontSize:17}} className={this.state.updating ? "fa fa-spin fa-spinner" : "fa fa-save"}></i></div>}
              {record.IsEdit && <div className="mx-2 pt-1" style={{ cursor: 'pointer' }} title="Cancel" onClick={() => { this.doCancel(record); this.setState({descr:''}) }}><i style={{fontSize:17}} className="fa fa-times"></i></div>}
                </div>
        }
      ];
    }
}

问题根因 #

antd 多选Select要求绑定的value值必须是数组类型，现有代码存在两个类型不匹配问题：

1. 点击编辑按钮给descr赋值时，直接取record.Description，当后端无返回值时，该字段为undefined/null，属于非法值，组件会自动生成一个空标签项
2. 保存、取消编辑时重置descr为空字符串''，字符串类型和多选要求的数组类型不匹配，同样会触发异常渲染

另外代码还存在两个潜在问题：

• 所有行的编辑态Select共用全局descr状态，同时编辑多行时会出现值串扰
• 渲染Select.Option时未过滤无效选项、未加唯一key，可能出现空选项、React渲染警告

修复方案 #

1. 初始值做类型兜底：点击编辑赋值时，判断Description是否为合法数组，非法值统一替换为空数组

// 编辑按钮点击逻辑修改
onClick={() => { 
  this.doEdit(record,index); 
  this.setState({
    descr: Array.isArray(record.Description) ? record.Description : []
  }) 
}}

2. 重置值保持类型一致：保存、取消编辑时，把descr重置为空数组而非空字符串

// 保存按钮逻辑
onClick={() => { 
  this.updateRecord(record); 
  this.setState({descr:[]}) 
}}
// 取消按钮逻辑
onClick={() => { 
  this.doCancel(record); 
  this.setState({descr:[]}) 
}}

3. 过滤无效选项+补Option key：渲染下拉选项时过滤掉描述为空的无效项，给Option加唯一key避免渲染异常

{this.state.Modules && this.state.Modules
  .filter(d => d.Description != null && d.Description.trim() !== '')
  .map((d) => <Select.Option key={d.Description} value={d.Description}>{d.Description}</Select.Option>)
}

4. （可选优化） 把编辑态的选中值存在对应行的record字段上，替代全局descr状态，彻底解决多行编辑值串扰问题。

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