Блог

Я визуализирую данные, полученные из ответа 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 работает не так, как для циклов, он отображает каждый элемент как отдельный, не имея возможности отслеживать предыдущие отображаемые элементы.

возможно ли сделать это таким образом, или мне нужно манипулировать массивом перед передачей его в RenderRows? если да, то какой наиболее оптимальный способ сделать это, foreach? для цикла?

Теперь, когда ваш вопрос более ясен, я могу предложить вам использовать что-то вроде <SectionList> (см. документ). Чтобы использовать 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}
/>
  

Таким образом, вы можете все правильно настроить.

Я действительно надеюсь, что это могло бы вам помочь!

Один из вариантов — создать новый массив с map из вашего исходного массива. Надеюсь, это поможет вам в правильном направлении 🙂

 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>
  );
 }
}
  

Вот рабочая закуска для выставки