Question

在我正在处理的项目的评论部分中，我以递归方式显示评论，以互相回复。因此，我递归地为Comment渲染该组件，但是在对顶级注释的答复中，尽管使用了constructor(props){ super(props);...，但我的身份验证道具仍未通过。

这是评论部分的屏幕截图，以及传递的道具： https://imgur.com/a/iPLjVl4 我无法回复这两个评论测试，因为如控制台所示，道具未通过身份验证。忽略屏幕截图中的即时消息未登录，也不会考虑在内，如果我也不会被忽略。

它发生在我的onSubmit函数中，该函数发布对评论的回复。仅当答复作为对顶级注释的答复的注释时，才会发生该错误，顶级答复工作正常。

评论1 <-可以发布此罚款（可以通过auth props获得罚款）
- 评论2 <-可以很好地回复评论1（未通过身份验证道具）

我还很陌生，所以我可能做不正确的事情。

我一直在研究将什么道具传递给递归组件，而auth道具没有传递给回溯性生成的组件。尽管显然使用了所有相同的代码。

这是我渲染嵌套注释的地方：

{
commentJSON.replies.length > 0 &&  commentJSON.replies.map(child=>{
   return <Comment commentJSON={child} />
   })
}

评论的构造方法是

constructor(props){
    super(props);
    this.state = {
         userComment:''
    }
}

在组件底部有这个：

Comment.propTypes = {
    auth: PropTypes.object.isRequired
  };

const mapStateToProps = state => ({
    auth: state.auth
});

export default connect(
    mapStateToProps
)(Comment);

我从Post View组件渲染顶层组件

 {   
    this.state.comments ? (
       commentSection.map(topLevelComment=>{                                        
          return(  <Comment commentJSON={topLevelComment}/> )
       })
   ):(
       <p>Loading Comments..</p>
   )
}

TypeError: _this.props.auth is undefined
Comment/_this.onSubmit
src/components/Post/CommentSection/Comment.js:34

  31 | onSubmit = (e) => {
  32 |     
  33 |     e.preventDefault()
> 34 |     let user = this.props.auth.user.user;
     | ^  35 |     let comment = {
  36 |         author:{
  37 |             username:user.username,

Answer 1

export default connect(
    mapStateToProps
)(Comment);

在文件外部使用Comment组件时，将使用连接到redux的组件（与connect HOC一起包装），但是在同一文件中使用Comment组件时，则使用未连接到redux的组件。我建议不要将此组件连接到redux并将auth设置为来自父组件的道具。

像其他所有组件一样，递归生成的组件不会收到身份验证道具？

1 个答案: