Прямо сейчас у меня есть приложение, где я хочу получить комментарии из сообщений. Я не знаю, как лучше всего это сделать.
То, что у меня есть, отображает только те сообщения, в которых есть комментарии, но в нескольких комментариях не отображается только один.
<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, который в основном объединяет таблицу сообщений и комментариев, объединяющую их по PostId, сейчас он отображает только один комментарий и отображает только сообщение, содержащее комментарии.
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)
})
})
Есть ли лучший способ, которым я должен пойти по этому поводу? Идеальное решение моей проблемы - захватить все сообщения, отобразить все сообщения, если в сообщении есть комментарии, то также отобразить все эти комментарии. У меня есть запрос, который возвращает только сообщение, в котором есть комментарии, и при отображении в них отображается только один комментарий, в котором не отображаются все ..
Чтобы получить все комментарии, в настоящее время я просто использую простой findAll, но этот вывод отображает комментарии, потому чтокомментарии находятся в таблице комментариев. Вот почему я присоединился к таблицам в предыдущем запросе.
Если это поможет, это компонент, на который отправляются реквизиты.
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>
)
// }
}