Javascript 如何基于createdAt显示数组的最后2个元素_Javascript_Reactjs

Javascript 如何基于createdAt显示数组的最后2个元素

javascript reactjs

Javascript 如何基于createdAt显示数组的最后2个元素,javascript,reactjs,Javascript,Reactjs,我试图通过实现这个filterMethod来显示基于createdAt的前2条最近的评论 const filterComments = props.comments.slice(0, inc).sort((a, b) => { const date1 = new Date(a.createdAt) as any; const date2 = new Date(b.createdAt) as any; return date1 - date2; }); inc是一个

我试图通过实现这个filterMethod来显示基于createdAt的前2条最近的评论

const filterComments = props.comments.slice(0, inc).sort((a, b) => {
    const date1 = new Date(a.createdAt) as any;
    const date2 = new Date(b.createdAt) as any;
    return date1 - date2;
});

inc

是一个变量，如果用户选择showMore，该变量将递增

这没什么特别的

  const showMoreComments = () => {
        return filterComments.map((comment, i) => (
            <div key={i}>
                <CommentListContainer comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} />
            </div>
        ));
    };

CommentList.tsx

import React, { Fragment, useState } from "react";
import Grid from "@material-ui/core/Grid";
import OurSecondaryButton from "../../../common/OurSecondaryButton";
import CommentListContainer from "../commentListContainer/commentListContainer";
import storeHooks from "../../../common/storeHooks";

function CommentList(props: any) {
    const [showMore, setShowMore] = useState<Number>(2);
    const [openModal, setOpenModal] = useState(false);
    const [showLessFlag, setShowLessFlag] = useState<Boolean>(false);
    const the_comments = props.comments.length;
    const inc = showMore as any;
    const min = Math.min(2, the_comments - inc);
    const showComments = (e) => {
        e.preventDefault();
        if (inc + 2 && inc <= the_comments) {
            setShowMore(inc + 2);
            setShowLessFlag(true);
        } else {
            setShowMore(the_comments);
        }
    };
    const handleClickOpen = () => {
        setOpenModal(true);
    };
    const handleCloseModal = () => {
        setOpenModal(false);
    };

    const showLessComments = (e) => {
        e.preventDefault();
        setShowMore(2);
        setShowLessFlag(false);
    };
    const isBold = (comment) => {
        return comment.userId === props.userId ? 800 : 400;
    };

    const filterComments = props.comments.slice(0, inc).sort((a, b) => {
        const date1 = new Date(a.createdAt) as any;
        const date2 = new Date(b.createdAt) as any;
        return date1 - date2;
    });

    const showMoreComments = () => {
        return filterComments.map((comment, i) => (
            <div key={i}>
                <CommentListContainer comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} />
            </div>
        ));
    };

    return (
        <Grid>
            <Fragment>
                <div style={{ margin: "30px 0px" }}>
                    {props.comments.length > 2 ? (
                        <Fragment>
                            {min !== -1 ? (
                                <Fragment>
                                    {min !== 0 ? (
                                        <OurSecondaryButton onClick={(e) => showComments(e)} component="span" color="secondary">
                                            View {min !== -1 ? min : 0} More Comments
                                        </OurSecondaryButton>
                                    ) : (
                                        <OurSecondaryButton onClick={(e) => showLessComments(e)} component="span" color="secondary">
                                            Show Less Comments
                                        </OurSecondaryButton>
                                    )}
                                </Fragment>
                            ) : (
                                <OurSecondaryButton onClick={(e) => showLessComments(e)} component="span" color="secondary">
                                    Show Less Comments
                                </OurSecondaryButton>
                            )}
                        </Fragment>
                    ) : null}
                </div>
            </Fragment>
            {showLessFlag === true ? (
                // will show most recent comments below
                showMoreComments()
            ) : (
                <Fragment>
                    {/* filter based on first comment  */}
                    {filterComments.map((comment, i) => (
                        <div key={i}>
                            <CommentListContainer comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} />
                        </div>
                    ))}
                </Fragment>
            )}
        </Grid>
    );
}
// prevents un-necesary re renders
export default React.memo(CommentList);

注释形状

[
  {
    "id": 177,
    "comment_body": "",
    "gifUrl": "https://media0.giphy.com/media/LRNxdA0soqs09YWa4F/giphy.gif?cid=e8452e68d3e94d3464efb70e1059fae80209a6b531b30b7d&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:07.939Z",
    "updatedAt": "2020-05-24T21:11:07.939Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 178,
    "comment_body": "",
    "gifUrl": "https://media2.giphy.com/media/xThtalTQnCNEatzgUU/giphy.gif?cid=e8452e68d3e94d3464efb70e1059fae80209a6b531b30b7d&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:28.971Z",
    "updatedAt": "2020-05-24T21:11:28.971Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 179,
    "comment_body": "fsfsfssfsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:12:31.920Z",
    "updatedAt": "2020-05-24T21:12:31.920Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 175,
    "comment_body": "fsfsfsfsfsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:10:56.303Z",
    "updatedAt": "2020-05-24T21:10:56.303Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 176,
    "comment_body": "",
    "gifUrl": "https://media3.giphy.com/media/Jrl4FlTaymFFbNiwU5/giphy.gif?cid=e8452e68f6a75bf1f94a134a15ab35ff1b0a09e2d060e1da&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:01.152Z",
    "updatedAt": "2020-05-24T21:11:01.152Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 180,
    "comment_body": "fssfsffsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:12:58.086Z",
    "updatedAt": "2020-05-24T21:12:58.086Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  }
]

在实际切片之前，你不应该先对它们进行排序吗

您可以首先使用

slice（0）

克隆原始数组，因为

sort（）

在本地对元素进行排序（您不应该在状态上这样做）

这对我很有用：

const comments=[{createdAt:'2020-01-20'}，{createdAt:'2019-01-01'}，{createdAt:'2019-05-01'}，{createdAt:'2019-05-06'}]；
const inc=2；
const filterComments=comments.slice（0）.sort（（a，b）=>{
const date1=新日期（a.createdAt）；
const date2=新日期（b.createdAt）；
返回日期2-日期1；
}).slice（0，inc）；
控制台日志（过滤器命令）谢谢Pablo，但是问题是props.comments是从一个不可变的选择器派生的，所以我会得到这个错误TypeError:无法分配给对象“[object Array]”的只读属性“0”
它是这个.props.posts的一个Decentant，它来自一个redux选择器，这就是我首先切片的原因，然后排序。我也应该做注释。切片（0）。。。然后是逻辑的其余部分。但是如果你先切片，你将只对你已经过滤的部分进行排序。排序应该总是在元素总数上进行，然后您应该尽可能多地限制结果。一个更好的选择是确保注释总是经过排序获得的，这样您就可以确信您可以使用第一个inc元素。排序不正确，我将共享注释数据形状。默认情况下，它应该显示最近的2条评论，当显示更多评论时，它将显示最近的2条评论。我应该换减速箱吗
 case types.COMMENT_UPDATES_SUCCESS:
    console.log(action);
    const findCommentKey2 = state.posts.findIndex((x) => x.id === action.payload.comment.postId);
    console.log(findCommentKey2);
    draft.posts[findCommentKey2].Comments = [
        action.payload.comment,
        // add comment first, then sort it out by the most recent comment
        ...draft.posts[findCommentKey2].Comments,
    ];
    return;

[
  {
    "id": 177,
    "comment_body": "",
    "gifUrl": "https://media0.giphy.com/media/LRNxdA0soqs09YWa4F/giphy.gif?cid=e8452e68d3e94d3464efb70e1059fae80209a6b531b30b7d&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:07.939Z",
    "updatedAt": "2020-05-24T21:11:07.939Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 178,
    "comment_body": "",
    "gifUrl": "https://media2.giphy.com/media/xThtalTQnCNEatzgUU/giphy.gif?cid=e8452e68d3e94d3464efb70e1059fae80209a6b531b30b7d&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:28.971Z",
    "updatedAt": "2020-05-24T21:11:28.971Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 179,
    "comment_body": "fsfsfssfsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:12:31.920Z",
    "updatedAt": "2020-05-24T21:12:31.920Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 175,
    "comment_body": "fsfsfsfsfsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:10:56.303Z",
    "updatedAt": "2020-05-24T21:10:56.303Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 176,
    "comment_body": "",
    "gifUrl": "https://media3.giphy.com/media/Jrl4FlTaymFFbNiwU5/giphy.gif?cid=e8452e68f6a75bf1f94a134a15ab35ff1b0a09e2d060e1da&rid=giphy.gif",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:11:01.152Z",
    "updatedAt": "2020-05-24T21:11:01.152Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  },
  {
    "id": 180,
    "comment_body": "fssfsffsf",
    "gifUrl": "",
    "userId": 9,
    "postId": 15,
    "createdAt": "2020-05-24T21:12:58.086Z",
    "updatedAt": "2020-05-24T21:12:58.086Z",
    "author": {
      "username": "barnowl",
      "gravatar": "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png",
      "bio": null
    }
  }
]