时间戳

首页 > 解决方案 > renderRows如何获取最后一项的值

react-native - renderRows如何获取最后一项的值

问题描述

我正在渲染从 api 响应中获取的数据。我希望能够将正在呈现的当前行与最后一行进行比较。

示例：将项目日期与最后一个项目进行比较。能够插入当天的分隔符。这只是我正在尝试做的一个简单示例。

//data    
const array = [
  {day: '3/14', name: 'item1'},
  {day: '3/14', name: 'item2'},
  {day: '3/14', name: 'item3'},
  {day: '3/15', name: 'item4'}
]

如果是新的一天，我将插入一个分隔符。目的是按天对数据进行分组。 

let lastDay = null;
renderRows(item, index) {    
    //conditions
    let day = item.day;
    if(day != lastDay) daySeparator = true;

    //store last day
    lastDay = day;

    return (
        <ListItem noIndent style={style.listRow}>
        <Row style={[style.tableRow,{alignItems: 'center'}]}>
            <Text>{item.name}</Text>
        </Row>
        </ListItem>
    );
}

我的问题是 renderRows 不像 for 循环那样工作，它将每个项目单独渲染，而无法跟踪以前渲染的项目。

是否可以这样做，或者我是否需要在将数组传递给 RenderRows 之前对其进行操作？如果是这样，最优化的方法是什么，foreach？循环？

标签： react-nativereact-native-flatlist

解决方案

现在你的问题更清楚了，我可以建议你使用类似的东西<SectionList>（见doc）。为了使用 aSectionList您必须将其传递给分段数组。使用您发布的数据结构，我将按天对项目进行分组：

const array = [
  { day: "3/14", name: "item1" },
  { day: "3/14", name: "item2" },
  { day: "3/14", name: "item3" },
  { day: "3/15", name: "item4" }
];

const grouped = array.reduce(
    (result, item) => ({
      ...result,
      [item["day"]]: [...(result[item["day"]] || []), item]
    }),
    {}
  );

const sectionedList = Object.keys(grouped).map(item => ({
    title: item,
    data: grouped[item]
}));

这将为您提供以下结构：

[
  {
    title: "3/14",
    data: [
      { day: "3/14", name: "item1" },
      { day: "3/14", name: "item2" },
      { day: "3/14", name: "item3" }
    ]
  },
  {
    title: "3/15",
    data: [{ day: "3/15", name: "item4" }]
  }
];

现在您可以在 a 中使用它<SectionList>，例如：

<SectionList
  renderItem={({item, index, section}) => {...}}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={sectionedList}
  keyExtractor={(item, index) => item + index}
/>

这样您就可以正确自定义所有内容。

我真的希望这可以帮助你！

推荐阅读