0

我有一个使用 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 呈现按日期排序的时间线并显示进度状态。我想在我的 UI 上添加一个字段来通知用户他们是否从前一个日期进步/或退步。示例中的 3 个状态是 [1:'ON TARGET', 2:'FOLLOW', 3:'DO NOT FOLLOW'] 这些是按进度顺序排列的，例如ON TARGET从FOLLOW.

所以我需要映射过程来查看之前项目的状态，并在有进展、回归或没有变化时呈现一个属性。我想需要设置等级并给每个状态一个值，然后在映射发生时进行查找？

4

1 回答 1

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>} 
    )
}}
于 2018-12-17T12:07:41.110 回答