回复注释在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>
);
}
}
答案 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,因为不能保证所有答复都是不同的)
希望有帮助!