How to add the data set by form to table

figure: it is a form form, enter data at the top and click add, how to insert the data into the table below, and display it.

Page Code:

:
<Tooltip title="">
    <a onClick={this.showEditForm.bind(this,text)}><Icon type="edit"  style={{ fontSize: 18 }} /></a>
</Tooltip>

showEditForm=(text) =>{
        const data_save = this.props.signal.data_save.data
        const data_form = []
        for (let j=0; j<data_save.length; jPP) {
            for (let i=0; i<data_save[j].signal.length; iPP) {
                if(data_save[j].variety == text.variety){
                    this.setState({
                        okText: "",
                        modalVisible:true,
                        isCreate:false,
                        formTitle: ""+" "+text.variety,
                        currentEditId:text.variety,
                        data_form: 
                            data_form.valueOf(
                                data_form.push({
                                    time:data_save[j].signal[i][0],
                                    signal:data_save[j].signal[i][1]
                                })
                            ),
                    })
                    /*console.log("data_form", data_form)*/
                    this.form.setFieldsValue({
                        ...data_form
                    });
                }
            }
            
        }
    }

form Code:

import React from "react"
import PropTypes from "prop-types"
import { Table, Form, Card, Tooltip, Input, InputNumber, Radio, Modal,Select, Icon, Button, TimePicker } from "antd";
import currencies from "../../common/currencies.js";
const FormItem = Form.Item
const format = "HH:mm";


const AddSignal =(props) => {
  console.log("form",props)
  this.state ={
    data: props.data,
    loading: false,
  }
  console.log("state", this.state)
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) =>{
      if(!err) {
          this.state.data.valueOf(this.state.data.push(values))
          console.log("form1", values, this.state.data)
      }
    })
  }
  const {visible, onCancel, onCreateOrSave, form, title, okText, initValues} = props;
  const { getFieldDecorator } = form;
  const clumn = [
  {
    title: "",
    dataIndex: "time",
    width: 100,
    editable: true,
  },
  {
    title: "",
    dataIndex: "signal",
    width: 120,
    editable: true,
  },
  {
    title: "",
    dataIndex: "action",
    width: 30,
    render: (text, record, index) => (
      <span>
        <Tooltip title="">
          <a style={{color:"red"}}>
              <Icon style={{ fontSize: 16}} type="delete" />
          </a>
        </Tooltip>
      </span>
    ),
  }]
  return (
    <Modal
      visible={visible}
      title={title}
      okText={okText}
      onCancel={onCancel}
      onOk={onCreateOrSave}>
        <Form layout="inline" onSubmit={handleSubmit}>
          <FormItem>
            {getFieldDecorator("time",{})(
            /*<TimePicker format={format} />*/<Input />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator("signal",{})(
              <Select placeholder="" style={{ width: 160}} >
                <Select.Option value="[]">[] </Select.Option>
              <Select.Option value="[]">[] </Select.Option>
              <Select.Option value="[]">[] </Select.Option>
              </Select>
            )}
          </FormItem>
          <FormItem><Button htmlType="submit" type="primary"></Button></FormItem>
        </Form>
        <Table rowKey="time" columns={clumn} dataSource={this.state.data} pagination={false} size="small" scroll={{y: 350}} />
    </Modal>
  )
}



export default Form.create()(AddSignal)

const handleSubmit = (e) => { e.preventDefault(); form.validateFields((err, values) =>{ if(!err) { this.state.data.valueOf(this.state.data.push(values)) console.log('form1', values, this.state.data) } }) }