Question

我的主页显示工作卡。

我有一个存储作业卡密钥的数组，如下所示：

{
    id: 123,
    position: 'Frontend Developer',
    company: 'Apple Inc.',
    date: 'Nov 17',
    description: 'Lorem1 ipsum'
},

单击此ID为123的作业卡时，该作业的描述道具（此处为“ Lorem1 ...”）显示在新的路径/ jobs /：id下。

单击的工作卡的链接如下：

http://localhost:3000/jobs/kc6d22p

问题： 我正在使用uid（），并且一旦我重新加载此描述站点后就不想得到 TypeError （之所以会获得此错误，是因为在网站上重新加载uid（）已更改）。

我的问题： 如何解决并通过localstorage（）加载此描述道具以解决我的问题？

App.js：

import React, {Component} from 'react'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Home from './Home'
import Description from './Description'
import {jobs} from '../service'

export default class App extends Component {
    render(){
        return(<Router><React.Fragment><Route exact path = "/" render = {() => <Home jobs = {jobs}/>} /><Route path = "/jobs/:id" render = {({match}) => (<div><Description job = {jobs.find(job => job.id === match.params.id)}/> </div>)}/> </React.Fragment> </Router>)
    }
}

Description.js：

import React, {Component} from 'react'
import styled from 'styled-components'

const Wrapper = styled.p `
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      margin: 30px auto;
      padding: 25px;
      background: white;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(180, 180, 180, 0.4);
    `

export default class Description extends Component {
    render() {
        const {job} = this.props
        return (<Wrapper><p>{job.description} </p> </Wrapper>)
    }
}

Answer 1

将您的对象转换为JSON.stringify(object)字符串，存储在localStorage中。

稍后获取您的字符串，然后使用JSON.parse(string)

转换回对象

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

能解决您的问题吗？

将数组中的信息保存到本地存储中

1 个答案: