Блог

Я создаю группу по запросу в react native с помощью функции reduce, затем я создаю список разделов для отображения данных, но у меня есть некоторые проблемы. Мой код

 <View>
  <SectionList
    renderSectionHeader={({ section: { title} }) => (
      <Text style={{ fontWeight: 'bold' }}>{title}</Text>
    )}
    sections={this.state.dataSource}
    renderItem={({item, index, section}) => <Text key={index}>{section.data}</Text>}
    keyExtractor={(item, index) => item   index}
  />
</View>

const dataSource = responseJson.old_cases.reduce(function (sections, item) {
    let section = sections.find(section => section.gender === item.gender);
    
    if (!section) {
        section = { gender: item.gender,data:[] };
        sections.push(section);
    }
    
    section.data.push(item.name)
    return sections;
}, []);

this.setState({dataSource: dataSource // Pass the dataSource that we've processed above}); 
 

но мой результат таков

 title //header
name_1,name2
name_1,name2
title2 //header
name_3
 

Вывод, который я хочу

 title //header
name_1
name2
title2 //header
name_3
 

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

Вы визуализируете все данные в своем разделе одновременно, вам нужно визуализировать только один элемент одновременно.

В вашем списке квартир:

 renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}