renderRows 如何获取最后一项的值

Question

我正在呈现从 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？ for 循环？

Answer 1

一种选择是使用初始数组的映射创建一个新数组。希望这会让你走上正确的方向:)

const array = [1, 2, 3, 4]

export default class App extends React.Component {
  render() {
    const newArr = array.map ((item, idx) => {
      const newItem = idx === array.length - 1 ? 'Gotta keep them separated' : item
      return <Text>{newItem}</Text>
    })
  return (
    <View>
     {newArr}
    </View>
  );
 }
}

这是一个有效的 expo snack

Answer 2

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

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" }]
  }
];

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

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

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

真心希望对您有所帮助！

renderRows 如何获取最后一项的值

renderRows how to get value of last item

react-native

react-native-flatlist