在SPA中移至下一个组件时如何存储上一个组件的状态？

Question

我有一个MobileNumberLogin和LoginOTPScreen。这是两个独立的屏幕。每当用户输入手机号码并单击继续按钮，他就会被重定向到LoginOTPScreen。但是，假设用户从LoginOTPScreen击回按钮，他返回到MobileNumberLogin屏幕，并且用户输入的数字消失了。

以下是我对MobileNumberLogin的代码

const MobileNumberLogin = ({ history }) => {
  const [mobileNumber, setMobileNumber] = useState("");

return (
       <input
          type="tel"
          maxLength="10"
          className="mobileNumberTextField"
          placeholder="Your Mobile Number"
          autoFocus={true}
          value={mobileNumber}
          onChange={event => setMobileNumber(event.target.value)}
        />.....

LoginOTPScreen的后退按钮代码如下

`history.goBack();` is called on the button's click

但是一旦我回到MobileNumberLogin，输入的数字就会从输入中消失。

Answer 1

您可以使用ContextAPI这样包装路由

const ContextA = React.createContext('light');

<ContextA.Provider value={{
 sharedData: this.state.sharedData, 
 setSharedData: this.setState({sharedData: 'sharedDta'})
}}>
  <Switch>
    <Route exact path='/route1' component={ MobileNumberLoginWrapped } />
    <Route exact path='/route1' component={ LoginOTPScreenWrapped } />
  </Switch>
</ContextA.Provider>

然后用上下文使用者包装您的MobileNumberLogin

<ContextA.Consumer>
{ ({sharedData, setSharedData}) =>  <MobileNumberLogin sharedData={sharedData} setSharedData={setSharedData}/>
<ContextA.Consumer>

已阅读官方的反应文档：https://reactjs.org/docs/context.html

Answer 2

但是假设用户点击了后退按钮...

用户也可以点击刷新按钮。如果您也需要处理该问题，则可以考虑使用此package。LocalStorage是不安全的，因此不应用于存储任何对安全敏感的数据。