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

时间:2019-01-02 20:54:57

标签: reactjs

回复注释在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>
    );
  }
}

2 个答案:

答案 0 :(得分: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>
);

};

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

答案 1 :(得分:0)

示例数据中第二条帖子的一条评论没有回复(回复),因此非常希望看到此错误:您在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,因为不能保证所有答复都是不同的)

希望有帮助!