在子组件中进行一些渲染后数据变得不确定

Question

我的反应 js 应用程序中有下一个情况。 我有 2 个组件。 在父组件中，我提出了 http 请求，其中我得到了一些数据：

 const Parent = () => { return ( <div> <Children data={data}/> </div> ); }; export default Parent;

在儿童组件中，我有 ANT 模态：

 const TestModal = ({title, visible, onCloseModal, data}) => { const [state, setState] = useState(0); console.log(data); return ( <Modal className="12l" visible={visible} getContainer={false} forceRender={false} destroyOnClose={true} > <button type="button" onClick={() => setState(state + 1)}>increment</button> </Modal> ); }; export default TestModal;

您如何看到我将data作为子组件中的道具传递并在console.log(data); . 当我打开模态 window 时，我在console.log(data); ，但如果我点击增量数据increment ， data变为未定义`。 为什么会发生这种情况以及如何永久保留数据？
PS：当我单击计数器时，父组件不会呈现。