Antd Select组件选项不渲染，显示“No data”问题求助

问题分析 #

1. 自定义组件与Form受控模式冲突：你的自定义Table组件内部维护了state.data，但它被Form.getFieldDecorator包裹后，Form会接管组件的value和onChange逻辑，两者状态不同步会导致Select的value匹配异常。
2. Select的value不在选项集合中：初始状态下data.table[0][0]是空字符串''，但你定义的jm1数组中没有value: ''的选项，Antd Select在匹配不到对应value时会显示"No data"。

解决方案 #

1. 将自定义Table改为受控组件，移除内部state #

直接使用Form传递的props.value和props.onChange，不再维护自身state，确保和Form状态完全同步：

修改后的自定义Table组件代码：

import {Modal, Form, DatePicker, message, Select, Input} from 'antd';

const jm1 = [
  {value: '', label: '请选择'}, // 添加空选项，匹配初始空值
  {value: '结膜无充血、水肿', label: '结膜无充血、水肿'}, 
  {value: '充血+', label: '充血+'},
  {value: '混合充血', label: '混合充血'}, 
  {value: '睫状充血', label: '睫状充血'}, 
  {value: '滤泡+', label: '滤泡+'},
  {value: '乳头+', label: '乳头+'}
];

class Table extends React.Component {
  handleValueChange(x, y, selectedValue) {
    // 对二维数组进行行级深拷贝，避免直接修改props.value
    const newData = [...this.props.value];
    newData[x] = [...newData[x]];
    newData[x][y] = selectedValue;
    // 通知Form更新字段值
    this.props.onChange(newData);
  }

  render() {
    const tableData = this.props.value || [];
    return (
      <table className={styles.table} border="1">
        <tr>
          <th style={{width: 100}}>结膜</th>
          <td>
            <Select 
              options={jm1}
              onChange={this.handleValueChange.bind(this, 0, 0)} 
              value={tableData[0]?.[0] || ''} // 处理数组为空的边界情况
              placeholder="请选择结膜状态"
            />
          </td>
        </tr>
      </table>
    )
  }
}

2. 修复数据更新的不可变性 #

原handleValueChange中直接修改this.state.data属于浅拷贝，会导致Form无法正确感知数据变化。修改为行级深拷贝后，确保数据更新是 immutable 的，符合React和Antd Form的状态管理要求。

3. 添加空选项匹配初始值 #

在jm1数组开头添加{value: '', label: '请选择'}，这样当初始值为空字符串时，Select能匹配到对应选项，不会显示"No data"。

4. 确保Form初始值有效性 #

在FundusImageModal中，data.table的初始值是二维空数组，确保自定义Table组件接收到的props.value是有效的二维数组，避免渲染时出现undefined错误。

补充说明 #

• Antd Form的getFieldDecorator会向包裹的组件传递value和onChange两个核心props，自定义组件必须遵循这个约定才能和Form正确联动。
• 对于二维数组类型的表单字段，修改时必须保证数据的不可变性，否则Form的字段校验和值更新可能出现异常。

内容的提问来源于stack exchange，提问作者李佳霖