如何呈现页面的一部分而不是所有组件

Question

这是我的组件的样子：

import React, { useState, forwardRef, useImperativeHandle } from "react";
import { Form, Input, Label, Segment, Header } from "semantic-ui-react";


const VendorSignupForm = forwardRef(({ data }, ref) => {

    const [vendorSignupData, setVendorSignupData] = useState({})
    const [errorMessages, setErrorMessages] = useState({})

    useImperativeHandle(ref, () => {
        return {
            vendorSignupData: vendorSignupData,
            setVendorSignupData: setVendorSignupData,
            setErrorMessages: setErrorMessages
        };
    });

    const handleChange = e => {
        const { name, value } = e.target;
        setVendorSignupData(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    return (
        <Form>
            <Header block attached='top'>
                Signup Information
            </Header>
            <Segment color='orange' attached>
                <Form.Group widths='equal'>
                    <Form.Input label="Username (Email Address)" placeholder="Email Address" defaultValue={vendorSignupData.username} name="username" onChange={handleChange} error={errorMessages.username} />
                    <Form.Input label="Password" placeholder="Password" defaultValue={vendorSignupData.password} name="password" onChange={handleChange} error={errorMessages.password} />
                    <Form.Input label="Confirm Password" placeholder="Retype password" defaultValue={vendorSignupData.confirmpassword} name="confirmpassword" onChange={handleChange} error={errorMessages.confirmpassword} />
                </Form.Group>
            </Segment>

        </Form>
    );

});

export default VendorSignupForm;

这是父表单的外观：

import { vendorSignup, doVendorSignup } from "../../webapi/vendor_signup";
import VendorSignupForm from "../../components/VendorSignupForm";
import { Grid, Image, Item, Label, Button, Icon, Form, Message } from "semantic-ui-react";
import React, { useRef, useState } from "react";
import UIFeedback from "../../components/UIFeedback";


const VendorSignupFormParent = ({ user, data }) => {
    const vendorSignupFormRef = useRef(null);
    const [uiFeedbackMessage, setUIFeedbackMessage] = useState()
    const [uiFeedbackType, setUIFeedbackType] = useState()




    async function handleClick(e) {
        e.preventDefault()
        let ret = await doVendorSignup(vendorSignupFormRef.current.vendorSignupData)
        if (ret.type) {
            if (ret.type == "validation") {
                console.log("validation errors")
                vendorSignupFormRef.current.setErrorMessages(ret.err)
            }
            else {
                setUIFeedbackType(ret.type) # <-- This call resets the data to blank
                setUIFeedbackMessage(ret.errors)
            }

        }
        else {
            if (ret.success) {
                console.log("all good")
            }
        }
    };


    function DisplayProperControl({ data }) {
        return (
            <div>
                <React.Fragment>
                    <Grid columns={1}>
                        <Grid.Row>
                            <Grid.Column>
                                <VendorSignupForm data={data} ref={vendorSignupFormRef}></VendorSignupForm>
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
                    <Grid.Row>
                        <Grid.Column>
                            <Button onClick={handleClick}>
                                Signup
                    </Button>
                        </Grid.Column>

                    </Grid.Row>
                </React.Fragment>
                <React.Fragment>
                    <Grid.Row>
                        <Grid.Column>
                            <UIFeedback type={uiFeedbackType} message={uiFeedbackMessage}></UIFeedback>
                        </Grid.Column>
                    </Grid.Row>
                </React.Fragment>
            </div>
        );
    }

    return (

        <DisplayProperControl data={data}></DisplayProperControl>

    )
};


export default VendorSignupFormParent;

当用户单击Signup按钮时，我会进行AJAX调用，并使用UIFeedback组件在页面上显示服务器返回的内容，但会将VendorSignupForm中的数据重置为空白（初始数据），我认为这是由于重新渲染了所有组件。

由于页面上已经存在数据，如何避免在不将提交的数据从服务器发送回的情况下这样做？