javascript - 使用 react 从 localStorage 渲染数据

Question

这是我使用 React 的第一步，到目前为止一切正常，我已经创建了三个输入:username、email 和 comment .我将值保存在 localStorage 中，一切都很好。 现在我正在创建另一个可以显示它们的组件。 所以基本上它将我的评论从 localStorage 中取出并将它们显示在列表中。 我可以记录我的评论，以便从 localStorage 检索我的数据，但我不知道如何构建我的数据以显示它。 我应该使用构造函数吗？我应该只创建一个简单的函数来检索数据吗？我无法思考应该如何获取我的信息。 这是我所拥有的:

import React from "react";

export class CommentDisplay extends React.Component {
componentDidMount(){
  var comment = JSON.parse(localStorage.getItem('data'));
  console.log("comment retrieve : ", comment);
  return comment;
}

 render () {
   return (
     <div className="list-group">
       <ul className="list-group-item"></ul>
    </div>
  );
 }
}

感谢您的帮助

Answer 1

如果我对您的理解是正确的，您想使用 localStorage 作为数据库的一种替代品，并在键 data 下存储评论列表。在一般情况下，数据将是一个对象列表，其中每个对象包含三个属性 - username、email、comment。

如果假设是正确的，我会提出以下建议:
创建一个包装器组件，类似于 CommentList，并将评论列表存储在该组件的状态中:

export class CommentList extends React.Component {
constructor(){
  let comments = JSON.parse(localStorage.getItem('data'));
  this.state = {
      comments: comments
  };
}

render () {
   return (
     ...
  );
 }
}

然后，每个评论都可以表示为一个功能组件(无状态组件)，它接收评论信息作为 Prop 。有点像

function Comment(props) {
  return <h1>{props.usernamename}({props.email}) wrote: {props.comment}</h1>;
}

在 CommentList 组件中，例如，您可以定义一个方法 renderComments:

renderComments(){
    return this.state.comments.map((comment,index) => 
        <Comment 
            key={index{
            username={comment.username}
            email={comment.email}
            comment={comment.comment}
        />
    )
}

然后只需在 CommentList 的渲染方法中调用此方法，例如: {this.renderComments()}

希望这对您有所帮助。如果您有任何疑问，请随时提问。