React中用local/session storage初始化状态可行吗？遇undefined错误

当然可行啦！用sessionStorage/localStorage来初始化React组件的state是完全合理的方案，常用于保存用户偏好、临时会话数据等场景，你遇到的undefined问题其实是个容易忽略的小细节导致的～

你第一段代码的逻辑看起来没问题，但出现undefined大概率是环境兼容性问题：

• sessionStorage是浏览器专属的API，在服务器端渲染（SSR）环境（比如Next.js、Gatsby）或者非浏览器环境（比如Node.js测试用例）中，sessionStorage对象本身不存在，直接调用sessionStorage.getItem()要么抛出错误，要么返回undefined。
• 另一种可能是浏览器禁用了本地存储权限，此时调用sessionStorage的方法会失败，同样返回undefined。

而你用this.getItems()的方式能正常运行，大概率是这个方法里偷偷做了环境判断或者错误兜底，比如：

getItems() {
  // 先确认当前是浏览器环境，再调用sessionStorage
  if (typeof window !== 'undefined') {
    return sessionStorage.getItem('testkey');
  }
  // 非浏览器环境返回默认值
  return '默认内容';
}

要直接赋值的核心是先确保sessionStorage存在，下面给你几种靠谱的写法：

写法1：在constructor里直接做判断 #

constructor(props) {
  super(props);
  // 先检查window是否存在，避免非浏览器环境报错
  const storedValue = typeof window !== 'undefined' 
    ? sessionStorage.getItem('testkey') 
    : '默认值'; // 也可以设为null或者其他符合业务的默认内容
  this.state = { abc: storedValue };
}

写法2：用类属性初始化（更简洁） #

如果你的项目支持类属性语法（一般React 16.8+或者配置了Babel都支持），可以直接这么写：

class YourComponent extends React.Component {
  state = {
    abc: typeof window !== 'undefined' ? sessionStorage.getItem('testkey') : '默认值'
  };
  
  // 其他组件方法...
}

写法3：在componentDidMount中赋值（适合复杂场景） #

如果你的存储值可能在组件挂载前被修改，或者需要处理一些异步逻辑，可以在组件挂载后再更新state：

constructor(props) {
  super(props);
  // 先给个初始默认值
  this.state = { abc: '默认值' };
}

componentDidMount() {
  if (typeof window !== 'undefined') {
    const storedValue = sessionStorage.getItem('testkey');
    // 只有当存储值存在时才更新state
    if (storedValue) {
      this.setState({ abc: storedValue });
    }
  }
}

• 本地存储只能存字符串！如果要存对象、数组这类复杂数据，记得存的时候用JSON.stringify()转成字符串，取的时候用JSON.parse()转回来：

  // 存对象
  sessionStorage.setItem('userInfo', JSON.stringify({ name: '张三', age: 25 }));
  // 取对象
  const userInfo = typeof window !== 'undefined' ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
  

• 别忘了处理getItem返回null的情况（当对应的键不存在时会返回null），避免后续逻辑因为拿到null而出错。

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