Reactjs react为数组中的每个项调用函数
我非常关注如何为特定的post.id执行函数，而不是为数组中的所有项执行函数 场景 单击“显示更多注释”后，将为数组中的每个项目显示更多注释 比如说 还有这个 我怎样才能使它在显示更多评论时，只显示该帖子的更多评论 这是当前代码，逻辑正在其中发生Reactjs react为数组中的每个项调用函数,reactjs,Reactjs,我非常关注如何为特定的post.id执行函数，而不是为数组中的所有项执行函数 场景 单击“显示更多注释”后，将为数组中的每个项目显示更多注释 比如说 还有这个 我怎样才能使它在显示更多评论时，只显示该帖子的更多评论 这是当前代码，逻辑正在其中发生 {post.Comments.length > 0 ? ( <Fragment> <Typography style={{padding: "10px 0px", margin: "20px 0px"}}
{post.Comments.length > 0 ? (
<Fragment>
<Typography style={{padding: "10px 0px", margin: "20px 0px"}}>Commments</Typography>
<CommentList showMore={showMore} comments={post.Comments} />
{/* if show more hide show more button and show show less comments button */}
{/* {isPost === post.id ? ( */}
<Fragment>
{post.Comments.length > 3 && showLessFlag === false && (
<Button onClick={ e => showComments(e, post.id)} variant="outlined" component="span" color="primary">
Show More Comments
</Button>
)}
{post.Comments.length > 3 && showLessFlag === true && (
<Button onClick={ e => showLessComments(e)} variant="outlined" component="span" color="primary">
Show Less Comments
</Button>
)}
</Fragment>
{/* ):(
null
)} */}
</Fragment>
):(
<Grid item={true} sm={12} lg={12} style={{ padding: "30px 0px"}}>
<Typography>No Commments Yet</Typography>
</Grid>
)}
{post.Comments.length>0(
命令
{/*如果显示更多隐藏显示更多按钮和显示较少注释按钮*/}
{/*{isPost===post.id？（*/}
{post.Comments.length>3&&showlesFlag==false&&(
showComments（e，post.id）}variant=“outlined”component=“span”color=“primary”>
显示更多评论
)}
{post.Comments.length>3&&showlesFlag===true&&(
showLessComments（e）}variant=“outlined”component=“span”color=“primary”>
少发表评论
)}
{/* ):(
无效的
)} */}
):(
还没有通知
)}
从“@material ui/core/Avatar”导入化身；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/DeleteOutlined”导入DeleteOutlineDicon；
从“@material ui/icons/Favorite”导入收藏夹图标；
从“@material ui/icons/FavoriteBorder”导入FavoriteBorder图标；
从“时刻”中导入时刻；
从“React”导入React，{Fragment，useState}；
从“../../common/OurLink”导入我们的链接；
从“../../forms/CommentList/CommentList”导入CommentList；
从“../../forms/comment/CommentForm”导入CommentForm；
导出默认函数PostList（道具：任意）{
const[isComment，setIsComment]=useState（false）；
const[showMore，setShowMore]=useState（3）
const[showLessFlag，setShowLessFlag]=useState（false）；
const[comment_body，setCommentBody]=useState（“”）；
const[isPost，setIsPost]=useState（null）；
常量writeComment=（id）=>{
setIsComment（isComment？“：id）；
};
const showcoments=（e，id）=>{
e、 预防默认值（）；
setShowMore（12）；
setShowLessFlag（真）；
//setIsPost（isPost？“：id）
}
const showLessComments=（e）=>{
e、 预防默认值（）；
setShowMore（3）；
setShowLessFlag（假）；
}
const commentSubmit=（e:any，id:number）=>{
e、 预防默认值（）；
常量formData={
联合国机构，
posted:id
};
如果（注释长度>6）{
if（支持后通知（formData））{
setIsComment（false）
setCommentBody（“”）
}
}否则{
警报（“注释必须至少包含6个字符”）
}
};
const{posts，currentUser}=props；
控制台日志（isPost）
return posts.length>0(
posts.map（（post，i）=>(
{post.postContent.slice（0,30）}
{post.author.username}
喜欢：{post.likeCounts}
{/*props.likePost（post.id）}
>
{" "}
喜欢这个帖子吗
props.dislikePost（post.id）}>
我不喜欢这个帖子
*/}
{currentUser&¤tUser.user&&post.userId===currentUser.user.id(
props.deletePost（post.id）}>
删除
) : (
无效的
)}
{post.likedByMe===true(
props.dislikePost（post.id）}>
) : (
props.likePost（post.id）}>
)}
{时刻（post.createdAt.calendar（）}
writeComment（post.id）}variant=“outlined”component=“span”color=“primary”>
{isComment===post.id？“关闭”：“写评论”}
{isComment===post.id
? (
setCommentBody（e.target.value）}
comment_body={comment_body}
onSubmit={e=>commentSubmit（e，post.id）}
/>
)
：null}
{post.Comments.length>0(
命令
{/*如果显示更多隐藏显示更多按钮和显示较少注释按钮*/}
{/*{isPost===post.id？（*/}
{post.Comments.length>3&&showlesFlag==false&&(
showComments（e，post.id）}variant=“outlined”component=“span”color=“primary”>
显示更多评论
)}
{post.Comments.length>3&&showlesFlag===true&&(
showLessComments（e）}variant=“outlined”component=“span”color=“primary”>
少发表评论
)}
{/* ):(
无效的
)} */}
):(
还没有通知
)}
))
) : (
无Po
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import moment from "moment";
import React, { Fragment, useState } from "react";
import OurLink from "../../common/OurLink";
import CommentList from "../../forms/commentList/CommentList";
import CommentForm from "../../forms/comment/CommentForm";
export default function PostList(props: any) {
const [isComment, setIsComment] = useState(false);
const [showMore, setShowMore] = useState(3)
const [showLessFlag, setShowLessFlag] = useState(false);
const [comment_body, setCommentBody] = useState('');
const [isPost, setIsPost] = useState(null);
const writeComment = (id) => {
setIsComment(isComment ? "" : id);
};
const showComments = (e, id) => {
e.preventDefault();
setShowMore(12);
setShowLessFlag(true);
// setIsPost(isPost ? "" : id)
}
const showLessComments = (e) => {
e.preventDefault();
setShowMore(3);
setShowLessFlag(false);
}
const commentSubmit = (e: any, id:number) => {
e.preventDefault();
const formData = {
comment_body,
postId: id
};
if(comment_body.length > 6 ){
if(props.postComment(formData)){
setIsComment(false)
setCommentBody('')
}
}else{
alert("Comment must be at least 6 characters")
}
};
const { posts, currentUser} = props;
console.log(isPost)
return posts.length > 0 ? (
posts.map((post, i) => (
<Fragment key={i}>
<Grid item={true} sm={12} md={12} style={{ margin: "20px 0px" }}>
<Paper style={{ padding: "20px",}}>
<Typography variant="h5" align="left">
<OurLink to={{
pathname: `/post/${post.id}`,
state: { post },
}}
title={post.title}
/>
</Typography>
<Grid item={true} sm={12} md={12} style={{ padding: "30px 0px"}} >
<Typography align="left">{post.postContent.slice(0, 30)}</Typography>
</Grid>
<Avatar
style={{
display: "inline-block",
margin: "-10px -20px",
padding: "0px 30px 0px 20px",
}}
sizes="small"
src={post.author.gravatar}
/>
<Typography display="inline" variant="subtitle1" align="left">
{post.author.username}
</Typography>
<Typography align="right">Likes: {post.likeCounts}</Typography>
{/* <span
style={{ cursor: "pointer" }}
onClick={() => props.likePost(post.id)}
>
{" "}
Like this post
</span>
<div style={{ margin: "20px 0px", cursor: "pointer" }}>
<span onClick={() => props.dislikePost(post.id)}>
Dislike this post
</span>
</div> */}
<Grid container={true} spacing={1} style={{ padding: "20px 0px"}}>
<Grid item={true} sm={10} lg={10} md={10} style={{ padding: "0px 0px"}}>
<Typography align="left">
{currentUser && currentUser.user && post.userId === currentUser.user.id ? (
<span style={{cursor: "pointer"}} onClick={() => props.deletePost(post.id)}>
<DeleteOutlineOutlinedIcon style={{ margin: "-5px 0px"}} color="primary" /> <span>Delete</span>
</span>
) : (
null
)}
</Typography>
</Grid>
<Grid item={true} sm={2} lg={2} style={{ padding: "0px 15px"}}>
<Typography align="right">
{post.likedByMe === true ? (
<span style={{ cursor: "pointer"}} onClick={() => props.dislikePost(post.id)}>
<FavoriteIcon style={{ color: "red" }}/>
</span>
) : (
<span onClick={() => props.likePost(post.id)}>
<FavoriteBorderIcon
style={{ color: "red", cursor: "pointer" }}
/>
</span>
)}
</Typography>
</Grid>
</Grid>
<Typography variant="h6" align="left">
{moment(post.createdAt).calendar()}
</Typography>
<Grid item={true} sm={12} lg={12} style={{ paddingTop: "40px"}}>
<Button onClick={() => writeComment(post.id)} variant="outlined" component="span" color="primary">
{isComment === post.id ? "Close" : "Write A Comment"}
</Button>
{isComment === post.id
? (
<CommentForm
commentChange={e => setCommentBody(e.target.value)}
comment_body={comment_body}
onSubmit={e => commentSubmit(e, post.id)}
/>
)
: null}
{post.Comments.length > 0 ? (
<Fragment>
<Typography style={{padding: "10px 0px", margin: "20px 0px"}}>Commments</Typography>
<CommentList showMore={showMore} comments={post.Comments} />
{/* if show more hide show more button and show show less comments button */}
{/* {isPost === post.id ? ( */}
<Fragment>
{post.Comments.length > 3 && showLessFlag === false && (
<Button onClick={ e => showComments(e, post.id)} variant="outlined" component="span" color="primary">
Show More Comments
</Button>
)}
{post.Comments.length > 3 && showLessFlag === true && (
<Button onClick={ e => showLessComments(e)} variant="outlined" component="span" color="primary">
Show Less Comments
</Button>
)}
</Fragment>
{/* ):(
null
)} */}
</Fragment>
):(
<Grid item={true} sm={12} lg={12} style={{ padding: "30px 0px"}}>
<Typography>No Commments Yet</Typography>
</Grid>
)}
</Grid>
</Paper>
</Grid>
</Fragment>
))
) : (
<div>
<Grid item={true} md={8}>
<Typography>No Posts yet</Typography>
</Grid>
</div>
);
}
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import moment from "moment";
import React, { Component } from "react";
const CommentList = (props: any) => {
return(
<div style={{ overflow:"scroll"}}>
{props.comments.slice(0, props.showMore).map((comment, i) => (
<div key={i}>
<List style={{ paddingBottom: "20px"}}>
<ListItem alignItems="center" style={{ padding: "0px"}}>
<Typography color="primary" align="left">
{comment.comment_body}
</Typography>
</ListItem>
<Typography style={{ padding: "0px 0px"}} variant="caption" align="left">{comment.author.username}</Typography>
<Typography style={{fontSize: "12px"}} variant="body1" align="left">{moment(comment.createdAt).calendar()}</Typography>
<Divider variant="fullWidth" component="li" />
</List>
</div>
))}
</div>
)
};
export default CommentList;
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import moment from "moment";
import React, { Component, Fragment, useState } from "react";
export default function CommentList(props: any) {
const [showMore, setShowMore] = useState(3)
const [showLessFlag, setShowLessFlag] = useState(false);
const showComments = (e) => {
e.preventDefault();
setShowMore(12);
setShowLessFlag(true);
}
const showLessComments = (e) => {
e.preventDefault();
setShowMore(3);
setShowLessFlag(false);
}
return (
<Grid>
{props.comments.slice(0, showMore).map((comment, i) => (
<div key={i}>
<List style={{ paddingBottom: "20px" }}>
<ListItem alignItems="center" style={{ padding: "0px" }}>
<Typography color="primary" align="left">
{comment.comment_body}
</Typography>
</ListItem>
<Typography style={{ padding: "0px 0px" }} variant="caption" align="left">{comment.author.username}</Typography>
<Typography style={{ fontSize: "12px" }} variant="body1" align="left">{moment(comment.createdAt).calendar()}</Typography>
<Divider variant="fullWidth" component="li" />
</List>
</div>
))}
<Fragment>
{props.comments.length > 3 && showLessFlag === false ? (
<Button onClick={e => showComments(e)} variant="outlined" component="span" color="primary">
Show More Comments
</Button>
) : (
<Fragment>
{props.comments.length > 3 && (
<Button onClick={e => showLessComments(e)} variant="outlined" component="span" color="primary">
Show Less Comments
</Button>
)}
</Fragment>
)}
</Fragment>
</Grid>
)
};
{post.Comments.length > 0 ? (
<Fragment>
<Typography style={{ padding: "10px 0px", margin: "20px 0px" }}>Commments</Typography>
<CommentList comments={post.Comments} />
{/* if show more hide show more button and show show less comments button */}
</Fragment>
) : (
<Grid item={true} sm={12} lg={12} style={{ padding: "30px 0px" }}>
<Typography>No Commments Yet</Typography>
</Grid>
)}