antd select options not rendering

Question

I'm totally fresh to antd so maybe I lack some common knowledge. Now I'm trying to add some options to my table and I use the select block like:

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

const jm1 = [
  {value: '结膜无充血、水肿', label: '结膜无充血、水肿'}, {value: '充血+', label: '充血+'},
  {value: '混合充血', label: '混合充血'}, {value: '睫状充血', label: '睫状充血'}, {value: '滤泡+', label: '滤泡+'},
  {value: '乳头+', label: '乳头+'}
];
class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.value
    }
  }

  render() {
    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={this.state.data[0][0]}/>
          </td>
        </tr>
    )
  }

  handleValueChange(x, y, e) {
    // let value = e.target.value;
    let value = e === null ? '' : String(e);
    let data = this.state.data;
    data[x][y] = value;
    this.setState({
      data: data
    });
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(data);
    }
  }
}

However it doesn't render at all, the options simply just show "No data" and I don't know how to solve the problem and what to search about. Thanks very much if anyone could help. No data

I want to show the options successfully and I exclude the problems of Chinese characters. I have searched but find no similar problems. I suspect it's related to the other part of my code...

const FundusImageModal = ({
                            form,
                            data,
                            visible,
                            createLoading,
                            editLoading,
                            onCreateSubmit,
                            onEditSubmit,
                            onCancel
                          }) => {

  const {getFieldDecorator} = form;

  const handleOk = () => {
    form.validateFields((err, values) => {
      if (!err) {
        let isValid = values.table.findIndex((value) => {
          return (value[0].length + value[1].length) > 0;
        });
        if (isValid >= 0) {
          if (data.id) {
            onEditSubmit(data.id, values);
          } else {
            onCreateSubmit(values);
          }
        } else {
          message.info('无法提交，至少要填写一项数据');
        }
      }
    });
  }
  const disabledDate = (current) => {
    return current && current >= moment().endOf('day');
  }

  let title = '编辑眼科检查记录';
  let loading = editLoading;
  if (data === undefined) {
    title = '添加眼科检查记录';
    loading = createLoading;
    data = {
      recordDate: moment().format('YYYY-MM-DD'),
      table: [['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', ''], ['', '']]
    }
  }

  return (
    <Modal title={title} okText="提交" cancelText="取消" destroyOnClose={true} confirmLoading={loading}
           visible={visible} onOk={handleOk} onCancel={onCancel} width={900}>
      <Form>
        <FormItem {...formItemLayout} label="采集时间">
          {getFieldDecorator('recordDate', {
            initialValue: moment(data.recordDate, 'YYYY-MM-DD'),
            rules: [{
              required: true, message: '请选择采集时间',
            }]
          })(
            <DatePicker disabledDate={disabledDate}/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('table', {
            initialValue: data.table
          })(
            <Table/>
          )}
        </FormItem>
      </Form>


    </Modal>
  )
}


export default Form.create()(FundusImageModal);

Answer 1

The problem has been solved. My antd's version is not up-to-date...