javascript - 使用 React 比较映射项以获得额外输出

Question

我有一个使用 React 的标准映射元素。我的渲染如下:

    render() {
    const { timeLineData } = this.props;
    const dateOrder = _.sortBy(timeLineData, function (o) { return new moment(o.createdDate) }).reverse();

    return (
        <div className="timeline-section">
            {dateOrder.map((status, index) => (
                <div key={index}> 
                    <div className="timeline-badge"></div>
                    <div className="timeline-panel">
                        <p>{moment(status.createdDate).format('ll')}</p>
                        <h2 className="timeline-title"><strong>{status.status}</strong></h2>
                        <p>{progressed}?</p>
                    </div>
                </div>
            ))}
        </div>
    );
}

我的名为 timeLineData 的数据按数据排序并按该顺序映射。这是输出:

timeLineData: [
0:{
createdDate: "2018-06-08T00:00:00"
status: "ON TARGET"}
1:{
createdDate: "2017-06-08T00:00:00"
status: "FOLLOW"}
2:{
createdDate: "2016-06-08T00:00:00"
status: "DO NOT FOLLOW"}
]

我的 UI 呈现按日期排序的时间线并显示进度状态。我希望用户界面上有一个附加字段来通知用户是否比之前的日期取得了进展/或倒退。示例中的 3 个状态为 [1:'ON TARGET', 2:'FOLLOW', 3:'DO NOT FOLLOW'] 这些按进展顺序排列，例如 ON TARGET 是从关注。

因此，我需要映射过程来查看先前项目的状态，并在存在进展、回归或没有变化时呈现属性。我想需要设置排名并为每个状态赋予一个值，然后在映射发生时进行查找？

Answer 1

如果您扩展 map 参数以包含 array，则可以使用 index 轻松检查前一项。以下只是您可以做的事情的基本概述。我添加了一些内容来检查您是否位于数组的开头，因为需要您有前一个项目进行比较。希望对您有帮助!

{dateOrder.map((status, index, array) => {
    // Setup goes here
    const previousStatus = array[index-1].status
    // If previousStatus returns undefined, it can be used to check if there's a previous item to compare to.
    return (
        // The rest of your code
        {(previousStatus && previousStatus === 'something')
            ? null
            : <div>{"The thing that you want"}</div>} 
    )
}}