基于过滤器的Javascript数组切片

我一直在写逻辑,如果用户点击显示更多的评论,就会显示更多的评论。

我不太清楚我在做什么。

评论列表.tsx

import React, { Fragment, useState } from "react";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import CommentItem from "./../commentItem/CommentItem";
import moment from "moment";
import OurLink from "../../../common/OurLink";
import OurSecondaryButton from "../../../common/OurSecondaryButton";
import OurModal from "../../../common/OurModal";
const ourStyle = {
    backgroundColor: "#FAFAFA",
    border: "1px solid #f2f2f2",
    borderRadius: "4px",
    padding: "15px 20px",
    margin: "15px",
};
function CommentList(props: any) {
    const [showMore, setShowMore] = useState<Number>(2);
    const [openModal, setOpenModal] = useState(false);
    const [showLessFlag, setShowLessFlag] = useState<Boolean>(false);
    const lastIndexOfComments = props.comments.length - 1;
    const startIndex = 0;
    console.log(lastIndexOfComments);
    const showComments = (e) => {
        e.preventDefault();
        const subtract = props.comments.length - 2 ;
        console.log("testing", subtract);
        setShowMore(subtract);
        // setShowLessFlag(true);
    };
    const handleClickOpen = () => {
        setOpenModal(true);
    };
    const handleCloseModal = () => {
        setOpenModal(false);
    };

    .....
    const showMoreComments = () => {
        return props.comments
            .slice(startIndex, showMore)
            .sort((a, b) => a.id - b.id)
            .map((comment, i) => (
                <div key={i}>
                    <List style={{ paddingBottom: "20px" }}>
                        <img alt="gravatar" style={{ margin: "-10px 15px" }} src={comment.author.gravatar} width="30" height="30" />
                        <Typography style={{ display: "inline-block", fontWeight: 700, padding: "5px 0px" }} variant="h6" align="left">
                            {Object.entries(props.currentUser).length === 0 ? (
                                <Fragment>
                                    <span style={{ cursor: "pointer", fontSize: "12px", fontWeight: isBold(comment) }} onClick={handleClickOpen}>
                                        {comment.author.username}
                                    </span>
                                    {comment.userId === props.userId && <span style={{ fontSize: "12px" }}> (OP)</span>}
                                    {openModal ? <OurModal open={openModal} handleClose={handleCloseModal} /> : null}
                                </Fragment>
                            ) : (
                                <Fragment>
                                    <OurLink
                                        style={{ fontSize: "12px", fontWeight: isBold(comment) }}
                                        to={{
                                            pathname: `/profile/${comment.author.username}`,
                                        }}
                                        title={comment.author.username}
                                    />
                                    {comment.userId === props.userId && <span style={{ fontSize: "12px" }}> (OP)</span>}
                                </Fragment>
                            )}
                        </Typography>
                        <div style={ourStyle}>
                            <CommentItem comment={comment} user={props.user} postId={props.postId} {...props} />
                            <Typography style={{ fontSize: "12px" }} variant="body1" align="left">
                                {moment(comment.createdAt).calendar()}
                            </Typography>
                        </div>
                    </List>
                </div>
            ));
    };

    const ourComments = props.comments;
    console.log("before comments", ourComments);
    console.log("fsfsfsftestingcomments", ourComments.slice(0, showMore));

    return (
        <Grid>
            <Fragment>
                <div style={{ margin: "30px 0px" }}>
                    <OurSecondaryButton onClick={(e) => showComments(e)} component="span" color="secondary">
                        View More Comments
                    </OurSecondaryButton>
                </div>
            </Fragment>
            {showLessFlag === true ? (
                // will show most recent comments below
                showMoreComments()
            ) : (
                <Fragment>
                    {/* filter based on first comment  */}
                    {props.comments
                        .filter((item, i) => item)
                        .sort((a, b) => b.id - a.id)
                        .slice(startIndex, showMore)
                        .map((comment, i) => (
                            <div key={i}>
                                <List style={{ paddingBottom: "20px" }}>
                                    <img alt="gravatar" style={{ margin: "-10px 15px" }} src={comment.author.gravatar} width="30" height="30" />
                                    <Typography style={{ display: "inline-block", fontWeight: 700, padding: "5px 0px" }} variant="h6" align="left">
                                        {Object.entries(props.currentUser).length === 0 ? (
                                            <Fragment>
                                                <span style={{ fontSize: "12px", cursor: "pointer", fontWeight: isBold(comment) }} onClick={handleClickOpen}>
                                                    {comment.author.username}
                                                    {comment.userId === props.userId && <span style={{ fontSize: "12px" }}> (OP)</span>}
                                                </span>

                                                {openModal ? <OurModal open={openModal} handleClose={handleCloseModal} /> : null}
                                            </Fragment>
                                        ) : (
                                            <Fragment>
                                                <OurLink
                                                    style={{ fontSize: "12px", fontWeight: isBold(comment) }}
                                                    to={{
                                                        pathname: `/profile/${comment.author.username}`,
                                                    }}
                                                    title={comment.author.username}
                                                />
                                                {comment.userId === props.userId && <span style={{ fontSize: "12px" }}> (OP)</span>}
                                            </Fragment>
                                        )}
                                    </Typography>

                                    <div style={ourStyle}>
                                        <CommentItem comment={comment} user={props.user} postId={props.postId} {...props} />
                                        <Typography style={{ fontSize: "12px" }} variant="body1" align="left">
                                            {moment(comment.createdAt).calendar()}
                                        </Typography>
                                    </div>
                                </List>
                            </div>
                        ))}
                </Fragment>
            )}
        </Grid>
    );
}
// prevents un-necesary re renders
export default React.memo(CommentList);