Сравнение сопоставленных элементов для дополнительного вывода с использованием React - PullRequest
Новая
       11

Сравнение сопоставленных элементов для дополнительного вывода с использованием React

0 голосов
/ 17 декабря 2018

У меня есть стандартный сопоставленный элемент, использующий 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"}
]

Мой пользовательский интерфейс отображает временную шкалу, упорядоченную по дате, и отображает состояние процессов.Я хотел бы, чтобы в моем пользовательском интерфейсе было дополнительное поле, чтобы уведомить пользователя, если он прогрессировал или регрессировал по сравнению с предыдущей датой.В этом примере 3 состояния: [1: «НА ЦЕЛЕ», 2: «СЛЕДУЮЩИЙ», 3: «НЕ СЛЕДУЕТ»] это в порядке прогрессии, например, ON TARGET - прогрессия от FOLLOW.

Так что мне нужен процесс отображения, чтобы посмотреть на состояние предыдущего элемента и отобразить атрибут, если произошла прогрессия, регрессия или нет изменений.Я полагаю, что нужно будет установить ранг и каждому статусу присвоить значение, а затем выполнить поиск во время сопоставления?

1 Ответ

0 голосов
/ 17 декабря 2018

Если вы расширите свои параметры 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>} 
    )
}}
...