arrays - 如何使用 React 从本地存储访问对象数组

问题描述

我是 React 新手，正在为项目经理构建一个应用程序，允许他们管理和与客户共享可视化时间线。

当客户端登录时，我将项目详细信息存储在 localStorage 中，现在我想在其中访问它们以在前端进行渲染。

我可以显示完整的数组，但似乎无法访问各个键。我已经尝试了一个地图功能，但似乎无法让它工作......

关于我哪里出错的任何帮助？


  // Login Form Submit
  formSubmit = e => {
    e.preventDefault()
    const data = {
      email: this.state.email,
      password: this.state.password
    }
    axios
      .post("/login", data)
      .then(response => {
        localStorage.setItem("token", response.data.token)
        localStorage.setItem("projects", JSON.stringify(response.data.projects))
        this.setState({
          loggedIn: true
        })
        this.props.setClient(response.data.client)
      })
      .catch(error => {
        this.setState({ message: error.response.data.message })
      })
  }

这就是登录功能，并将项目数据作为“项目”保存到本地存储中

class Charts extends Component {
  constructor() {
    super()
    this.state = {
      projects: []
    }
  }

  componentDidMount() {
    const data = localStorage.getItem("projects")
    this.setProjects(data)
  }

  setProjects = projects => {
    this.setState({
      projects: projects
    })
  }

这就是项目的 getItem 和 setState 的构造函数

            <Col lg={6} md={6} sm={12}>
              <p className="serviceDescription">
                Project Name:
                <br />
                {this.state.projects}
              </p>
            </Col>

这表明我正在检索“项目”，但是一旦我尝试使用点表示法显示“项目名称”，它就会出错

我敢肯定，作为一个菜鸟，这将是我所缺少的显而易见的东西。任何指导都非常感谢

在此先感谢马特

标签： arraysreactjs

您有一个数组，因此您无法通过 Dot 直接访问它，因此您可以通过以下方式解决它：

{this.state.projects[0].project_name}

注意：如果您需要打印项目列表：您可以使用地图：this.state.projects.map(v => v.project_name)

arrays - 如何使用 React 从本地存储访问对象数组

问题描述

解决方案

推荐阅读