如何让评论显示在所有帖子下

Question

现在我有一个应用程序，我想从帖子中检索 cmets。我不知道解决此问题的最佳方法是什么。

我目前仅显示具有 cmets 的帖子，但它不会仅显示单个评论的多个评论。

<Grid item xl={8}>
    {this.props.posts.map((post, index) =>
      <PostBodyTemplate key={index} postId={post.id}  onSubmit={this.handleSubmit} onChange={e => this.handleInputChange(e,post.id,post.userId,post.userIdName)} title={post.title} postBody={post.postBody} 
           giphyUrl = {post.giphyUrl} userWhoPosted={post.userIdName} commentBody={post.commentBody} userIdName={post.userIdName} />
       )} 
       {displayGifPicker ? (<AddGif selectedGif = {this.getGifState} />) : (<Button size="small" onClick={this.displayGifPicker} ><button>Add Gif</button></Button>)}
 </Grid>

数据来自 API，它基本上结合了 Posts 和 Comments 表，通过 PostId 连接它们，现在它只显示一条评论，并且当前只显示具有 cmets 的 Post。

router.get('/', (req, res) =>{
 sequelize.query( "SELECT comments.id, comments.postId, 
 comments.commentBody, comments.giphyurl, 
 comments.postPicture,comments.userId, comments.userIdto, 
 comments.userIdName, comments.userIdtoName, posts.postBody, posts.title, 
 posts.giphyUrl, posts.postPicture, posts.userId, posts.userIdName, 
 posts.userIdto, posts.userIdtoName FROM comments INNER JOIN posts ON 
 comments.postId = posts.id;")
.then(([results, metadata]) => {
res.json(results)
 })
})

有没有更好的方法可以解决这个问题？我的问题的理想解决方案是抓取所有帖子，显示所有帖子，如果帖子有 cmets，那么也显示所有这些 cmets。我的查询只返回有 cmets 的帖子，通过它们进行映射只显示一条评论，它不显示全部..

要获取当前的所有 cmets，我只使用了一个简单的 findAll，但这不会显示 cmets，因为 cmets 在 cmets 表中。这就是我在上一个查询中加入表的原因。

如果有帮助，这就是 props 发送到的组件。

     export default function PostBodyTemplate(props) {
      const { onChange, onSubmit} = props
         const classes = useStyles();
        //  render() {
             return (
                <Grid item xs={12} xl={8} lg={8} style={fr}>
                <Card className={classes.card}>
                <CardContent>
                <Paper className={classes.root}>
                <Typography variant="h5" component="h2" style={fr}>
                      {props.userWhoPosted} Gave A VH5 To Julio {props.postId}
                  </Typography>
                    <Typography variant="h5" component="h3">
                      {props.title}
                    </Typography>
                    <Typography component="p">
                      {props.postBody}
                    </Typography>
                    <img src={props.giphyUrl} style={giphyRes}/>
                </Paper>
                </CardContent>
                <CardActions>
                <IconButton aria-label="add to favorites">
                    <FavoriteIcon />
                    <div>Add Gif</div>
                  </IconButton>
                  <IconButton aria-label="share">
                    <EcoIcon />
                    <div>Add Photo</div>
                  </IconButton>
                  <form onSubmit={onSubmit}>
                    <div className={classes.container}>
                    <TextField
                               onChange = {onChange}
                                name='commentBody'
                                id="standard-full-width"
                                label="Reply To Post"
                                style={{ margin: 8 }}
                                placeholder="Reply to Post"
                                fullWidth
                                margin="normal"
                                InputLabelProps={{
                                shrink: true,
                                }}
                        />
                      {/* <p><button>Send VH5</button></p> */}
                      {/* <Button onSubmit={onSubmit} size="small">Submit</Button> */}
                      <button onSubmit={onSubmit}>Submit VH5</button>
                    {/* <button onSubmit={onSubmit}>Submit Reply</button> */}

                    </div>
                  </form>
                  {/* <CommentInput onChange={onChange}/> */}
                  {/* <Button size="small">Submit</Button> */}
                </CardActions>
                <Paper className={classes.root} value={props.postId}>
                    <Typography variant="h5" component="h3">
                    {props.commentBody}
                    </Typography>
                    <Typography component="p">
                      {props.userIdName} replied to the post. 
                    </Typography>
                </Paper>
              </Card>
              </Grid>
             )
        //  }
     }

Answer 1

您需要将您的内部连接更改为LEFT JOIN 以获取所有帖子，无论它们是否有 cmets。 More about joins