renderRows как получить значение последнего элемента - PullRequest
Новая
       1

renderRows как получить значение последнего элемента

1 голос
/ 14 марта 2019

Я отображаю данные, полученные из ответа 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?для цикла?

Ответы [ 2 ]

2 голосов
/ 14 марта 2019

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

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

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

1 голос
/ 14 марта 2019

Один из вариантов - создать новый массив с картой из исходного массива. Надеюсь, что это поможет вам в правильном направлении 

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

Вот рабочая Экспо-закуска

...