为什么sectionlist在一行中呈现字符串反应本机

Question

我正在使用 reduce 函数在 React Native 中按查询创建组，然后创建部分列表来显示数据，但我遇到了一些问题。我的代码

<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

我只想针对每个标题每行显示一个名字，但根据我的代码，渲染工作正常，因为第一个标题有两条记录，所以它渲染两次，但两个名字都在同一行上两次

Answer 1

您正在一次呈现您的部分中的所有数据，一次只需要呈现一个项目。

在你的公寓列表中：

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

为什么sectionlist在一行中呈现字符串反应本机

why sectionlist render string in one line react native

react-native

react-native-sectionlist