Question

所以这是我做出反应的第一步，到目前为止还可以，我已经使用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 (
     ...
  );
 }
}

然后，每个评论可以表示为功能组件（无状态组件），它将评论信息作为道具接收。像

这样的东西

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()}

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

使用react

1 个答案: