react子组件接收父组件的值始终是初始值

Z时代
2024-01-10
分类：技术分享

目标效果

希望点击添加按钮之后，弹出的模态框中默认值为空

点击修改按钮之后，弹出的模态框，默认值为修改项的名称

出现的问题

在第一次点击之后，以后每次模态框中的值都是第一次点击时获取到的值，但是在模态框的Input子组件中的确实获取到了每次点击时传入的不同值。

使用的antd4.0和react hooks

问题截图：

第一次点击添加,输入框初始值为空字符串

再点击一次修改按钮，输入框仍为空字符串：

项目地址：https://github.com/forceddd/react-manage-system

父组件中的主要代码

初始化

let [currentCategory, setCurrentCategory] = useState({})

点击添加按钮时

const extra = (
<Button type='primary' icon={<PlusOutlined />}
onClick={() => {
//将添加分类时 存储的currentCategory置为空对象
setCurrentCategory({})
setModalStatus(2)
}}
>
添加
</Button>)

点击修改按钮时：

 render: (category) => <Button type='primary' icon={<EditOutlined />}
onClick={() => {
setCurrentCategory(category);//保存当前被点击的分类信息
setModalStatus(1)
}}>修改</Button>

向子组件AddUpdateForm传值：


{'return中渲染name：' + (currentCategory.name || '')}<AddUpdateForm categoryName={currentCategory.name || ''} ref={formRef} ></AddUpdateForm>

子组件return代码

    <Form
initialValues={{
categoryName: props.categoryName //父组件传递进来分类名称
}}
onFinish={onFinish}
form={form}
>
{'AddUpdate中的获取到的name:' + props.categoryName}
<Form.Item
label="分类名"
name="categoryName"
rules={[
{
required: true,
message: '请输入分类名',
},
]}
>
<Input placeholder='请输入分类名称' />
</Form.Item></Form>