react使用ant design中的可编辑表格时出现错误！

Question

我在用react想写一个可以编辑的表格，我把ant design上的可编辑表格的代码复制到我的项目中，而且把react的版本升级到了16.3.0，但是在运行项目时出现了下面的报错！，
代码如下：

import React from 'react'
import { connect } from 'dva';
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
import EditableContext from './EditableContext'
import EditableFormRow from './EditableFormRow'
import EditableCell from './EditableCell'

const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: Edrward ${i},
age: 32,
address: London Park no. ${i},
});
}

const FormItem = Form.Item;

@connect(({ demonstrationBase, loading }) => ({
demonstrationBase,
loading: loading.models.demonstrationBase,
}))
@Form.create()
// export default class DemonstrationBase extends PureComponent {
class DemonstrationBase extends React.Component {
constructor(props) {
super(props);
this.state = { data, editingKey: '' };
this.columns = [
{
title: 'name',
dataIndex: 'name',
width: '25%',
editable: true,
},
{
title: 'age',
dataIndex: 'age',
width: '15%',
editable: true,
},
{
title: 'address',
dataIndex: 'address',
width: '40%',
editable: true,
},
{
title: 'operation',
dataIndex: 'operation',
render: (text, record) => {
const editable = this.isEditing(record);
return (

{editable ? (


{form => (
href="javascript:;"
onClick={() => this.save(form, record.key)}
style={{ marginRight: 8 }}
>
Save

)}

title="Sure to cancel?"
onConfirm={() => this.cancel(record.key)}
>
Cancel


) : (
this.edit(record.key)}>Edit
)}

);
},
},
];
}

  isEditing = record => record.key === this.state.editingKey;

  cancel = () => {
    this.setState({ editingKey: '' });
  };

  save(form, key) {
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.state.data];
      const index = newData.findIndex(item => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        this.setState({ data: newData, editingKey: '' });
      } else {
        newData.push(row);
        this.setState({ data: newData, editingKey: '' });
      }
    });
  }

  edit(key) {
    this.setState({ editingKey: key });
  }

  render() {
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataIndex === 'age' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    return (
      <Table
        components={components}
        bordered
        dataSource={this.state.data}
        columns={columns}
        rowClassName="editable-row"
      />
    );
  }
}

export default DemonstrationBase

import React from 'react'
const EditableContext = React.createContext();
export default EditableContext

import React from 'react'
import EditableContext from './EditableContext'
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';

const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);
export default EditableFormRow

import React from 'react'
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
import EditableContext from './EditableContext'

const FormItem = Form.Item;

class EditableCell extends React.Component {
    getInput = () => {  // 自带方法   判断数据类型， 返回输入组件
        if (this.props.inputType === 'number') {
            return <InputNumber />;
        }
        return <Input />;
    };

    render() {
        let {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            ...restProps
        } = this.props;
        return (
            <EditableContext.Consumer>
                {(form) => {
                    const { getFieldDecorator } = form;
                    return (
                        <td {...restProps}>
                            {editing ? (
                                <FormItem style={{ margin: 0 }}>
                                    {getFieldDecorator(dataIndex, {  // 注意，  dataIndex 必须存在， 刻在cloums表格头数据内设置。
                                        initialValue: record[dataIndex],
                                    })(this.getInput())}
                                </FormItem>
                            ) : restProps.children}
                        </td>
                    );
                }}
            </EditableContext.Consumer>
        );
    }
}

export default EditableCell

希望大佬可以帮我解答一下！