react+hook函数组件实现表单添加数据，表格展现

效果图：

目录结构：（目分为主页面BookTable,以及两个组件，表格组件和添加书籍组件）

主页面：主要是将两个组件引入进页面，并将添加书籍事件、删除书籍事件传递给子组件，由子组件触发。

import styles from './index.less';
import React, {
    useState, useEffect } from 'react';
import {
   PageContainer} from '@ant-design/pro-components';
import BookList from '@/components/BookTable/index';
import AddBook from '@/components/AddBook/index';
import {
   DataType} from '@/components/BookTable';
import {
   BookType} from '@/components/AddBook';
import {
   cloneDeep} from 'lodash';
const BookTable: React.FC = () => {
   
    const [tableData, setTableData] = useState<DataType[]>([
        {
   
            id:1,
            title:'水浒传',
            author:'施耐庵',
            price:'30'
        },
        {
   
            id:2,
            title:'西游记',
            author:'罗贯中',
            price:'20'
        },
        {
   
            id:3,
            title:'红楼梦',
            author:'曹雪芹',
            price:'23'
        }
    ]);
    function deleteBook(obj:DataType){
   
        const data:DataType[]= tableData.filter((item:DataType) => item