当我重新加载页面时，为什么 ReactJS 中的状态会更改为“未定义”我正在使用 MobX 进行状态管理

如何解决当我重新加载页面时，为什么 ReactJS 中的状态会更改为“未定义”我正在使用 MobX 进行状态管理

我有一个从商店获取状态数据的组件。但是当我重新加载页面时，状态变为未定义。

const PartnerDetails = (props) => {
 const { store: { partnerStore } } = useContext(AuthContext);
const [usePersonalDetails,setUsePersonalDetails] = useState(
        partnerStore.partner && partnerStore.partner.usePersonalDetails); //boolean

return (
    <>
          {console.log(partnerStore,'load')}
          {console.log(usePersonalDetails,'load')}
         <copyDetailsItem
             label="Set personal details as partner details"
             text="Use personal details"
             state={usePersonalDetails}
             toggle={//changeHandler}
             name="copyDetails"/>
    </>)

};
PartnerDetails.propTypes = {
    history: PropTypes.objectOf(PropTypes.any),};

export default PartnerDetails;

这个组件是我可以通过单击按钮导航到的页面。 当我导航到该页面时，数据由 partnerStore 获取，console.log 行按原样记录来自商店的数据。 但是，当我点击浏览器 (Chrome) 上的重新加载按钮时，console.log(partnerStore,'The partner store') 会显示来自合作伙伴商店的数据BUT console.log(usePersonalDetails) 显示 undefined。检查来自 partnerStore 的记录数据清楚地表明 usePersonalDetails 已定义

我该如何解决这个问题？