遍历JavaScript对象数组并输出

Question

我有这个js对象数组。 如何基于时间键在jsx中输出此内容？ 像下面的例子一样。

  [
    {
      articleName: "Burger",
      time: "11/8/2018, 2:43:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:43:30 PM"
    },
    {
      articleName: "Burger",
      time: "11/8/2018, 2:44:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:44:30 PM"
    },
    {
      articleName: "Burger",
      time: "11/8/2018, 2:45:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:45:30 PM"
    }
  ]

根据时间：

from 2:43:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

from 2:44:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

from 2:45:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

Answer 1

一种解决方案是根据时间将数组归为一组，然后将其映射到JSX中。 假设您的数组称为data ：

const dataByTime = data.reduce((acc, el) => {
    if (Array.isArray(acc[el.time])) {
        acc[el.time].push(el.articleName)
    } else {
        acc[el.time] = [el.articleName]
    }
    return acc
}, {})

现在dataByTime的格式为{ [date time]: ['burger', 'cheese'], ... }

因此，您可以像这样将其映射到JSX：

Object.keys(dataByTime).map((time) => (
    <div>
        {time}
        <View>
        {
            dataByTime[time].map(food => (
                 <Text>{food}</Text>
            ))
        }
        </View>
    </div>
))

您可以跳过JSX中的地图，也可以在原始的reducer中对其进行处理（您可以按下<Text>{el.articleName}</Text>来代替el.articleName ）。