如何在React中访问localStorage存储的对象数组及其内部属性

问题根源 #

1. localStorage存储的是字符串类型数据，你存入时使用JSON.stringify()将项目数组转为了字符串，但读取时没有使用JSON.parse()将字符串转回JS数组，导致state中的projects实际是字符串类型，自然无法调用数组的map方法，也无法访问数组内对象的属性。
2. 直接渲染字符串时React可以正常输出文本，所以你误以为拿到的是正常的数组结构。

修复方案 #

1. 修改Charts组件的数据读取逻辑 #

在componentDidMount中对取出的localStorage数据做反序列化处理，兜底默认值为空数组避免无数据时的报错：

componentDidMount() {
  // 取出字符串后转成JS数组
  const data = JSON.parse(localStorage.getItem("projects") || '[]')
  this.setProjects(data)
}

2. 调整渲染逻辑 #

projects是数组结构，需要遍历输出每一项的属性，同时要做兼容判断避免空数组访问报错：

遍历展示所有项目名称：

<Col lg={6} md={6} sm={12}>
  <p className="serviceDescription">
    Project Name:
    <br />
    {this.state.projects.map((project, idx) => (
      <span key={idx}>{project.project_name}</span>
    ))}
  </p>
</Col>

仅展示第一个项目名称：

<Col lg={6} md={6} sm={12}>
  <p className="serviceDescription">
    Project Name:
    <br />
    {this.state.projects.length > 0 ? this.state.projects[0].project_name : '暂无项目数据'}
  </p>
</Col>

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