Question

我正在尝试制作带有反应的寻宝游戏，我希望用户能够将其输入保存在本地存储中。但是，当我尝试在我的应用程序中实现本地存储时，我的地图功能开始出现错误。任何帮助表示赞赏。

class QuestionList extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            answers:this.props.answers
        }
    }

    componentDidMount(){
        const pastAnswers = localStorage.getItem(`answers${this.props.url}`) ? localStorage.getItem(`answers${this.props.url}`) : this.props.answers

        this.setState({answers:  pastAnswers})

    }
    //answer should be a single letter
    handleAnswer (answer, num){
        let items=[...this.state.answers]
        items[num-1]=answer
        this.setState({answers:items})
        localStorage.setItem(`answers${this.props.url}`, items)

    }
renderList = this.props.questions.map((question, index)=>{

        return <QuestionCard
                 question={question} 
                 apiLink={this.props.url} 
                 bar_color_open={this.props.bar_color_open} 
                 bar_color_closed={this.props.bar_color_closed} 
                 onHandleAnswer={this.handleAnswer.bind(this)} 
                 key={index+1} 
                 number={index+1}  
                 />
    })


    render(){

        const answerList = this.state.answers.map((answer, index)=>{
            return <AnswerBox letter={answer} key={index}/>
        })

        return(
            <div className='list-container'>    
                <div className="grid-container_questions">
                    <div className={this.props.grid_container}> 
                        {answerList}
                    </div>
                    <div className='questionlist-container'>
                        {this.renderList}
                    </div>
                </div>  
            </div>
        )
    }
}

如果需要显示更多代码，请告诉我，我将放置QuestionCards组件。但是，我认为不需要该组件，因为该组件似乎工作正常。

编辑：在尝试进入本地存储之前，我实际上已经尝试过字符串化，但是我一直收到此错误：

错误：引发了跨域错误。 React无法访问开发中的实际错误对象。

Answer 1

在本地存储中存储对象时，首先需要对它进行JSON.stringify处理，然后在提取时需要使用JSON.parse

Answer 2

如评论中所述，这实际上不是本地存储问题。我调查了链接到我的文档：reactjs.org/docs/cross-origin-errors.html。在使用root的ID将crossorigin添加到div之后，一切都重新开始工作。

反应和本地存储

2 个答案: