react实现添加表单

import './index.less';
import { Button, Tag, Space, Table, Drawer } from "antd"
import { MenuFoldOutlined, BorderInnerOutlined } from "@ant-design/icons"
import { useEffect, useState } from 'react';
import axios from 'axios';
import { history } from "umi"


export default function IndexPage() {
  const [show, setShow] = useState(true)
  const [name, setName] = useState([])
  const [open, setOpen] = useState(false);
  let [idx,setIdx]=useState("")


  let getName = async () => {
    let { data } = await axios.get("http://localhost:3000/name")
    console.log(data);
    if (data.code === 200) {
      setName(data.data)
    }

  }
  useEffect(() => {
    getName()
  }, [])
  const add1 = async () => {
    let number=0
    let ids=name.findIndex(item=>item._id===idx)
    number=name[ids].num
    let { data } = await axios.post('http://localhost:3000/add1', { id:idx,num:number})
    if (data.code === 200) {
      setOpen(false)
      setIdx("")
      getName()
    }
  }

  const columns = [
    {
      title: '表单名称',
      dataIndex: 'ti',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '提交数量',
      dataIndex: 'num',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>编辑</a>
          <a>删除</a>
          <a onClick={
            ()=>{
              setIdx(record._id)
              setOpen(true)
            }
            }>预览</a>
        </Space>
      ),
    },
  ];
  return (
    <div className='app'>
      <div className='header'>
        <MenuFoldOutlined
          onClick={() => { setShow(true) }}
          style={{ marginRight: '20px', fontSize: '20px' }} />
        <BorderInnerOutlined
          onClick={() => { setShow(false) }}
          style={{ marginRight: '20px', fontSize: '20px' }} />
        <input type="text" placeholder='请输入表单名称' />
        <Button type="primary"
          onClick={() => { history.push('/add') }}
        >新建表单</Button>
      </div>

      <Table dataSource={name} columns={columns}
        className={`table ${show ? '' : 'visible1'}`}
      />
      <div className={`data ${!show ? 'visible' : ''}`}
      >
        {
          name.map(item => (
            <div className='x' key={item._id}>
              <div className='xa'>{item.ti}</div>
              <div className='xb'>{item.num}个数据</div>
            </div>
          ))
        }
      </div>
      <Drawer title="Basic Drawer" placement="right" onClose={() => setOpen(false)} open={open}>
        <Button onClick={add1}>提交</Button>
      </Drawer>
    </div>
  );
}