Question

回复注释在reactjs中不起作用。

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

通过显示数组中的帖子及其对应的注释，此代码可以正常工作。非常感谢Stackoverflow工程师 Ryan 的帮助。现在，我想按照以下代码显示对每个评论的回复

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

但显示错误

Cannot read property 'replys' of undefined
    at Post

在angularjs中，我只能在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>

这是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>
    );
  }
}

Answer 1

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>
);

};

您可以通过这种方式获取重放数据。

Answer 2

示例数据中第二条帖子的一条评论没有回复（回复），因此非常希望看到此错误：您在map上致电undefined。

请改用此方法（检查我们是否首先收到了答复，只有在有答复的情况下才进行映射）：

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

修改

这是Post方法的一种实现（我将其重命名为renderPosts，您应该执行相同的操作），该方法应该可以工作（更好）：

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>
    </>
  );
};

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

希望有帮助！

React.js：回复注释在React.js中不起作用

2 个答案: