react 函数组件父子组件之间通信（问题困扰好久，一直得不到好的解决）

Question

问题背景:
1.父组件 eaxm.js 子组件 edit.js 都是无状态组件，都使用了hooks
2.想要实现的场景其实很简单，修改功能。父组件传递给子组件数据，子组件可以正常回显，并且能正常修改，保存即可

3.遇到的问题，要么父组件传递过去的数据接收不到，要么能正常回显之后无法编辑

代码：

eaxm.js

   const [editVisible, setEdit] = useState(false);
     let data =""
 //修改
    const edit = (i) => {
        setEdit(true);
        data = i.name;
    }


//exam.js 写的list布局组件
    function ListItem(props) {
        const hisorty = useHistory();
        const i = props.value;
        const handleClick = (i) => {
            //路由传参通过state，下一个路由通过prop.location接受
            hisorty.push({ pathname: i.path, search: i.id })
        };
        return (
            <div className="block">
                <img src={folder} style={{ height: '80px', width: '80px' }} onClick={() => handleClick(i)} />
                <div className="name">{i.name}</div>
                <Popover trigger="click" placement="bottom" content={<div><Button onClick={() => edit(i)}>修改</Button>  <Popconfirm
                    title="确认删除所选考试？删除后，所有本考试的数据将全部删除"
                    onConfirm={() => { confirm(i) }}
                    onCancel={() => { cancel() }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button danger >删除</Button>
                </Popconfirm></div>}>
                    <Button type="text">更多操作</Button>
                </Popover>
            </div>
        )
    }


 {/* 修改 */}
  <Edit ishow={editVisible} onEdit={setEdit} name={data}></Edit>

name ={data}的时候 子组件接收的总是空，无法赋值进去，除非写死一个字符串，但是写死之后 又没有办法修改

edit.js

import React, { useState, useEffect } from 'react';
import { Button, message, Modal, Form, Input } from 'antd';
import axios from '../../../service/axios';

export default function Edit(prop) {
    console.log(3333,prop)
    let a = prop.name;
    //声明form
    const [form] = Form.useForm();
    const [name, setName] = useState("");
    form.setFieldsValue({ name: a });
    const add = () => {
        let data = {};
        data.name = name;
        axios.post(`/api/tabExam/saveData.json`, data).then((res) => {
            if (res.success) {
                message.success("保存成功");
                prop.onEdit(false);
            } else {
                message.error(res.message);
            }
        });
    }
    return (
        <div>
            {/* 修改*/}
            <Modal
                title="修改"
                visible={prop.ishow}
                okText="确认"
                cancelText="取消"
                onOk={() => { add() }}
                onCancel={() => { prop.onEdit(false); form.resetFields(); }}
            >
                <h1>{name}</h1>
                <Form form={form}>

                    <Form.Item
                        label="考试名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入考试名称',
                            },
                        ]}
                    >
                        <Input onChange={(e) => { console.log(e.target.value); setName(e.target.value) }} />
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    );
}

希望指出这部分代码的问题 或者 这种场景有什么更好的方法去处理

Answer 1

data 是哪定义来的？