Reactjs：回复评论在Reactjs中不起作用

回复评论在reactjs中不起作用

我相信我已经通过这个古老的论坛进行了搜索，但找到的大多数解决方案都无法解决我的问题

这段代码可以通过显示来自数组的post及其相应注释来正常工作。非常感谢Stackoverflow工程师Ryan的帮助。现在我想按照下面的代码显示每个评论上的每个回复

 {props.comment.replys.map((reply, i) => (<div>{reply.reply}</div>))}

在angularjs中，我可以在Post ng repeat函数中实现下面的代码

<div class="post" ng-repeat='post in posts'>

                <div>
                    {{ post.content }}
                </div>

                    <!-- Comments -->
                    <div ng-repeat='comment in post.comments'>
                        <div class='comment'>{{ comment.comment }} <b>{{ comment.id }}</b></div>

                    <div ng-repeat='reply in comment.replys'>
                        <div>{{ reply.reply }}</div></div>

                    </div>
                </div>

{{post.content}}
{{comment.comment}{{comment.id}
{{reply.reply}

以下是reactjs中更新的代码

    import React, { Component, Fragment } from "react";
    import { render } from "react-dom";
const Post = (props) => {

console.log(props.post);
console.log(props.comments);

return (<React.Fragment><li >
          {props.post.id} - {props.post.content}
        </li>
        <div>
        {props.post.comments.map((comment, i) => (<div>{comment.comment} --- {comment.id}</div>))}

    {props.comment.replys && props.comment.replys.map((reply, i) => (<div>{reply.reply}</div>))}   

 </div>

        </React.Fragment>
        );

};
class Comment extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rec: [
{"id":"1","content":"first post","comments":[{"comid":"1","comment":"first comment","replys":[{"reply":"first comment reply1"},{"reply":"first comment second reply"}] }]},
{"id":"2","content":"second post","comments":[{"comid":"2","comment":"second comment", "replys":[{"reply":"second comment reply1"}] }]}
],
    };
  }
  render() {
    return (
    <div>
      <h3>Records</h3>
      <ul> 
        {this.state.rec.map((post, i) => ( 
        <Post post={post} key={i}/>
        ))}
      </ul>
    </div>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
const Post=（道具）=>{
控制台日志（道具日志）；
console.log（props.comments）；
返回（

{props.post.id}-{props.post.content}

{props.post.comments.map（（comment，i）=>（{comment.comment}-{comment.id}））}
{props.comment.replys&&props.comment.replys.map（（reply，i）=>（{reply.reply}））}
);
};
类注释扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
记录：[
{“id”：“1”，“内容”：“第一篇帖子”，“评论”：[{“comid”：“1”，“评论”：“第一条评论”，“回复”：[{“回复”：“第一条评论回复1”}，{“回复”：“第一条评论第二条回复”}]}，
{“id”：“2”，“内容”：“第二篇文章”，“评论”：[{“comid”：“2”，“评论”：“第二篇评论”，“回复”：[{“回复”：“第二篇评论回复1”}]}]}
],
};
}
render（）{
返回(
记录

{this.state.rec.map（（post，i）=>（
))}

);
}
}

示例数据中第二篇文章的一条评论没有回复（reply），因此您很可能会看到错误：您在

未定义的
上调用
map

请改为尝试此操作（首先检查是否有回复，如果有回复，则仅映射）：

请注意，我已经：
-将外部元素替换为片段的较短符号
-在注释的迭代中移动了回复的迭代（每个注释都有一个回复列表）
-添加了强制键属性（您应该在数据模型上的回复中添加一个id，我暂时使用了reply.reply值，但这通常是一个错误的id，因为不能保证所有回复都是不同的）

希望有帮助
 
const Post=（道具）=>{
const Post = (props) => {
return (<React.Fragment>
        <li>
            {props.post.id} - {props.post.content}
        </li>
        <div>
            {props.post.comments.map((comment, i) => (
                <div key={"comment_" + comment.id}>
                    <div>{comment.comment} --- {comment.id}</div>
                    {comment.replys && comment.replys.map((reply, i) => (<div>{reply.reply}</div>))}// Here
                </div>
            ))}

        </div>

    </React.Fragment>
);

返回(

{props.post.id}-{props.post.content}

{props.post.comments.map（（comment，i）=>(
{comment.comment}--{comment.id}
{comment.replys&&comment.replys.map（（reply，i）=>（{reply.reply}））}//
))}
);

})

您可以用这种方式获取重放数据。
props.comment
是未定义的-在render（）函数中添加一个console.log以查看props.comment实际上是什么。@Toby。console.log显示props.comment是未定义的，因此答案在于这个组件上面的组件，该组件将
comment
作为prop传递。您是否给这个组件一个名为“评论”的道具？托比爵士，请您用示例说明。我只是对如何进行itI感到困惑，我建议大家通读（文档）[如果您对传递道具的概念不太清楚，Andreas_D爵士，我已经实现了您的解决方案，并确保所有评论都有回复，但仍然存在相同的错误，无法读取Post中未定义的属性'replys'。我已经用您的解决方案更新了代码，还更新了我如何在angularjs中实现它。请参阅ms我们必须通过内部道具评论回复。先生，如果您有任何进一步的帮助，我们将不胜感激。在感谢您的帮助和时间之间，我们非常感谢Andreas_D先生。每次我们都提供一系列jsx元素（如映射），我们必须设置键属性。我会将其添加到解决方案中。谢谢你提醒我。我编辑了我的孤寂。@Andreas\u DThanks Sir SdkCy
{props.comment.replys && props.comment.replys.map((reply, i) => (<div>{reply.reply}</div>))}

const renderPosts = (props) => {
  return (
    <>
      <li>
        {props.post.id} - {props.post.content}
      </li>
      <div>
        {props.post.comments.map((comment) => {
          return (
            <div key={comment.comid}>
              <div>{comment.comment} --- {comment.id}</div>
              {comment.replys && comment.replys.map((reply) => <div key={reply.reply}>{reply.reply}</div>)}
            </div>
          )
        })}
      </div>
    </>
  );
};

const Post = (props) => {
return (<React.Fragment>
        <li>
            {props.post.id} - {props.post.content}
        </li>
        <div>
            {props.post.comments.map((comment, i) => (
                <div key={"comment_" + comment.id}>
                    <div>{comment.comment} --- {comment.id}</div>
                    {comment.replys && comment.replys.map((reply, i) => (<div>{reply.reply}</div>))}// Here
                </div>
            ))}

        </div>

    </React.Fragment>
);