使用本地存储保持状态时未定义状态字段答案

【问题标题】：state field undefined upon using local storage to persist state使用本地存储保持状态时未定义状态字段
【发布时间】：2021-11-03 17:47:32
【问题描述】：

这是我的代码，我正在使用 React：我使用本地存储是为了即使在页面刷新后也能保持状态并保持在同一页面上。

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = localStorage.getItem("app_state") ? localStorage.getItem("app_state") : {
            account: {
                email: "",
                password: ""
            },
            errorMessage: "",
            token: "",
            authenticated: false
        };

    }






    notLoggedInhomePage = () =>{

        if(!this.state.authenticated) {
            return (
                <form onSubmit={this.handleSubmit}>
                    <br/>
                    
                        <label>Email Address</label>
                        <input type="text" value={this.state.account.email} onChange={this.handleChange} name="email"/>
                        
                        <label>Password</label>
                        <input type="password" value={this.state.account.password} onChange={this.handleChange} name="password" />

                    <div>
                        {this.state.errorMessage}</div>
                    <br/>
                    <Button type="submit"  onClick={() => {
                        this.someFunction(String(this.state.account.email));
                    }}>Sign In</Button>
                </form>
            );
        }else{
            return(<Redirect to="/items/somelink" />);
        }
    }


    componentDidUpdate(prevProps, prevState){
        if(this.state.token !== prevState.token){ //set a new state if token changes
            localStorage.setItem("app_state", this.state);
        }
    }
    
    
}


export default App;

这是我得到的错误：

表示电子邮件未定义，此类错误消息背后的原因是什么，以及电子邮件未定义的原因/方式，即使它在状态中被定义为空字符串。

对上述问题有什么可能的解决方法？

【问题讨论】：

这能回答你的问题吗？ Storing Objects in HTML5 localStorage
见useLocalStorage react hook

标签： javascript reactjs react-hooks react-router local-storage

【解决方案1】：

使用 setItem 将一个 DOMstring 值插入本地存储，getItem 返回所说的 DOM 字符串 (MDN)，当我运行您的代码 sn-p 它返回“[object Object]”时，您可以通过使用来解决这个问题

localStorage.setItem("app_state", JSON.stringify(this.state));

然后将数据检索为：

this.state = localStorage.getItem("app_state") ? JSON.parse(localStorage.getItem("app_state")) : {
            account: {
                email: "",
                password: ""
            },
            errorMessage: "",
            token: "",
            authenticated: false
        };

【讨论】：

数据保存在localStorage中，但是当我刷新页面时，我并没有停留在同一页面上，而是将我重定向到/items/somelink，这背后的原因是什么？
您在使用if(!this.state.authenticated) 呈现表单之前正在检查身份验证，如果用户通过身份验证，它将重定向他们。我的猜测是您在测试时已登录，并使用return(<Redirect to="/items/somelink" />) 重定向您。

【解决方案2】：

本地存储只会返回字符串。不是对象或数组。您需要在将其分配给状态之前对其进行解析 JSON.parse(localStorage.getItem(app_state))

let appState = localStorage.getItem(app_state)
if(appState) {
  appState = JSON.parse(appState)
}

在你的代码中

state = getState()

const getState =() => {
  let appState = localStorage.getItem(app_state)
  if(appState) {
     return JSON.parse(appState)
  } else {
    return {
            account: {
                email: "",
                password: ""
            },
            errorMessage: "",
            token: "",
            authenticated: false
        };
  }
}

【讨论】：