Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
587 views
in Technique[技术] by (71.8m points)

react子组件接收到了父组件传来的值,但是渲染时,子组件始终是初始值

目标效果

希望点击添加按钮之后,弹出的模态框中默认值为空
点击修改按钮之后,弹出的模态框,默认值为修改项的名称
image.png

出现的问题

在第一次点击之后,以后每次模态框中的值都是第一次点击时获取到的值,但是在模态框的Input子组件中的确实获取到了每次点击时传入的不同值。
使用的antd4.0和react hooks

问题截图:

第一次点击添加,输入框初始值为空字符串
image.png
再点击一次修改按钮,输入框仍为空字符串:
image.png
项目地址: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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...