React使用LocalStorage持久化state时出现字段undefined报错问题

• 核心问题是 localStorage 仅支持存储字符串类型：你直接将this.state对象存入localStorage时，浏览器会自动调用对象的toString()方法，最终存储的是"[object Object]"这种无意义的字符串，而非结构化的状态数据。
• 读取状态时没有反序列化：你直接将localStorage取出的字符串赋值给this.state，此时state根本不是你预期的包含account属性的对象，访问this.state.account.email自然会触发undefined报错。
• 额外潜在问题：你当前仅在token变化时才同步状态到localStorage，如果account、authenticated等其他字段更新时不会触发持久化，也会导致状态不一致。

1. 存储状态到localStorage时，使用JSON.stringify()将对象序列化为字符串
2. 从localStorage读取状态时，使用JSON.parse()将字符串反序列化为对象
3. 建议添加异常捕获逻辑，避免localStorage存储的内容损坏时导致页面直接崩溃

修复后的参考代码如下：

class App extends React.Component{
    constructor(props){
        super(props);
        // 初始化时反序列化，加异常捕获
        let initState = {
            account: {
                email: "",
                password: ""
            },
            errorMessage: "",
            token: "",
            authenticated: false
        };
        try {
            const savedState = localStorage.getItem("app_state");
            if (savedState) {
                initState = JSON.parse(savedState);
            }
        } catch (e) {
            // 解析失败时用默认初始状态，清空损坏的存储内容
            localStorage.removeItem("app_state");
        }
        this.state = initState;
    }

    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 || 
           this.state.authenticated !== prevState.authenticated ||
           JSON.stringify(this.state.account) !== JSON.stringify(prevState.account)){ 
            // 序列化后再存储
            localStorage.setItem("app_state", JSON.stringify(this.state));
        }
    }
    
    
}

export default App;

额外注意：如果你的状态里有函数、Symbol等无法被JSON序列化的属性，需要单独处理过滤后再序列化存储

内容的提问来源于stack exchange，提问作者user14197708