Reactjs 如何避免组件间状态松动条件渲染

我正在尝试创建一个包含两个步骤/选项卡的表单。用户可以来回走动。每个步骤/选项卡都有输入框。我的步骤如下所示：

    //components/ProductDetail.js
    const ProductDetail = forwardRef(({ data }, ref) => {
        const [productData, setProductData] = useState({})
    return (
        <Form.Input defaultValue={productData.title} name="title" onChange={handleChange} />
          )
    }

    //components/ProductMetadata.js
    const ProductMetadata = forwardRef(({ data }, ref) => {
        const [productMetadata, setProductMetadata] = useState({})
    return (
        <Form.Input defaultValue={productMetadata.tag} name="tag" onChange={handleChange} />
          )
    }

这在大多数情况下都可以正常工作，但当用户来回更改步骤时，数据会重新初始化，并且会丢失以前在这些文本框中输入的内容。我很确定这是因为当用户点击每一步时，组件会被重新招标

---

当用户来回执行这些步骤时，如何避免丢失数据？

考虑使用xstate进行重构，并将数据存储在xstate上下文中。这样，当状态更改时，组件可以绘制上次用户处于该状态时存储的上下文。请在此处查看有关使用xstate进行状态管理的更多信息：。如果您对此感兴趣，请告诉我，我可以为您准备一个MWE。使用用户在文本框中输入的新值更新状态。确定。我想我必须在用户更改选项卡时保存状态，并在用户返回该选项卡时使用该状态。

//displayproduct.js

    const MyProduct = ({ user, data }) => {
        const [currentStep, setCurrentStep] = useState("info")
    
        function handleStepClick(e) {
            const { name } = e.target;
            setCurrentStep(name)
        }
    
    
        return (
            <React.Fragment>
                <Step.Group widths={2}>
                    <Step active={currentStep === "info"} name="info" onClick={handleStepClick} >
                        <Step.Content>
                            <Step.Title>Product Information</Step.Title>
                        </Step.Content>
                    </Step>
                    <Step name="metadata" active={currentStep === "metadata"} onClick={handleStepClick}>
                        <Step.Content>
                            <Step.Title>Product Metadata</Step.Title>
                        </Step.Content>
                    </Step>
                </Step.Group>
                {currentStep == "info" ? <ProductDetail data={data} ></ProductDetail> : <ProductMetadata data={data} ></ProductMetadata>}
            </React.Fragment>
    
        )
    };
    export default MyProduct;