0

在下面的数组“活动”中有 4 个值，我正在尝试映射这个值并在 ui 上显示消息和日期。这很好，但每次日期都在重复。就像

2019-07-11
Hello 1
2019-07-11
hello 2
2019-07-10
hello 3

如果日期相同，我必须按日期显示值，但不要重复日期。就像

2019-07-11
Hello1
Hellow2
2019-07-10
hello 3
hello 4

   active: Array(4)
    0:
    created_at: "2019-07-11"
    date: "Today"
    message: "<p> Hello 1 </p>
    status: 1
    time: "07:01:41"
    title: "Telephone"
    __typename: "NotificationList"

    1:
    created_at: "2019-07-11"
    date: "Today"
    message: "<p> Hello 2 </p>
    status: 1
    time: "06:59:38"
    title: "MSISDN"
    __typename: "NotificationList"

    2:
    created_at: "2019-07-10"
    date: "Today"
    message: "<p> Hello 3 </p>
    status: 1
    time: "06:57:08"
    title: "Telecom BSS"
    __typename: "NotificationList"

    3:
    created_at: "2019-07-10"
    date: "Today"
    message: "<p> Hello 4 </p>
    status: 1
    time: "06:57:08"
    title: "Telecom BSS"
    __typename: "NotificationList"

// Here am maping active array 
{notifications.notificationList.active.map((data,index) =>{
           const datahtml=data.message;
           const datee=formatDateTime(data.created_at);
           return(
             <View key={index}>
              <View style={{flexDirection:'column', backgroundColor:'white'}}>
                <Label text= {`${datee}`}/>
                <Heading title={`${data.title}`} time={`${data.time}`}/>

                <HTML html={datahtml} imagesMaxWidth={Dimensions.get('window').width} />
              </View>

            </View>
           )
           })}

谢谢

4

2 回答 2

0

获取所有日期并将其存储在列表中。然后使用此列表检查每个元素的日期（如果存在），然后将结果附加到新地图中，日期作为键，值作为消息。

于 2019-07-11T10:24:56.283 回答
0

类似的东西已经被建议了，我认为将你的数组转换成你可以使用的东西会更好，比如一个对象，它以日期为键，单个项目为数组值。

为此，您可以使用Array.reducelike

const byDate = array.reduce((obj, item) => {
    if(obj[item.created_at]) {
        obj[item.created_at].push(item);

        return obj;
    }

    obj[item.created_at] = [
      {...item}
    ];
    return obj;
}, {});

那么你的数据结构将如下所示

{
    '2019-07-11': [
        {
            created_at: '2019-07-11',
            date: 'Today',
            message: '<p> Hello 1 </p>',
            status: 1,
            time: '07:01:41',
            title: 'Telephone'
        }
        {
            created_at: '2019-07-11',
            date: 'Today',
            message: '<p> Hello 2 </p>',
            status: 1,
            time: '06:59:38',
            title: 'MSISDN'
        }
    ],
    '2019-07-10': [
        {
            created_at: '2019-07-10',
            date: 'Today',
            message: '<p> Hello 3 </p>',
            status: 1,
            time: '06:57:08',
            title: 'Telecom BSS'
        },
        {
            created_at: '2019-07-10',
            date: 'Today',
            message: '<p> Hello 4 </p>',
            status: 1,
            time: '06:57:08',
            title: 'Telecom BSS'
        }
    ]
}

然后你可以通过这样的方式更容易地操作这个对象

<View>
    {Object.keys(byDate).map(date => (
        <View>
            <Text>{date}</Text> /* Will display the date */
            <View>
                {byDate[date].map(item => <Text>{item.message}</Text>)} /* Then for each date display the message */
            </View>
        </View>
    ))}
</View>

我没有使用您的标记，因此请根据您的需要调整此标记。我不确定这样的东西对于很长的数组有多高效，但那是你要研究的。祝你好运。

于 2019-07-11T11:38:48.567 回答