Question

我想在react native中使用Sectionlist显示来自我的API的数据但我不知道如何生成sectionData。我认为我的数据太复杂了，难以理解，让我感到困惑。如下所示的结构

"Info": [
        {
            "Name": "test1",
            "Data": [
                {
                    "sss": "1215",
                    "aaa": "1010133000001",

                },
                {
                    "sss": "1215",
                    "aaa": "1010133000001",

                }
            ]
        },
        {
            "Name": "test2",
            "Data": [
                {
                    "sss": "1215",
                    "aaa": "1010133000001",

                },
                {
                    "sss": "1215",
                    "aaa": "1010133000001",

                }
            ]
        }
    ]
}

我想显示SectionHeader使用Name并显示目录使用Data。现在，我可以使用以下代码使用部分数据。我要如何继续？谢谢！

for (let idx in jsonData) {
        let Item = jsonData[idx];
        console.log(Item.Name)
        for (let index in Item.Data) {
           Item2 = Item.Data[index];
          console.log(Item2.sss)
        }
      }

Answer 1

首先，您必须更新数据数组，

let newArray = []
for (let item in jsonData) {
    let dict = {
      title: item.Name,
      data: item.Data
    }         
    newArray.push(dict)
 }

上面的代码之后，您将获得节列表的数组。

然后像下面这样使用

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

“ this.state.data”是您的新数组。 renderItem用于呈现节数据 renderSectionHeader用于呈现节标题。

Answer 2

提供一组项目，这将吐出板块数据

// maps it's an array of objects
// groupBy to extract section headers
let dataSource = _.groupBy(maps, o => o.name);
// reduce to generate new array
dataSource = _.reduce(dataSource, (acc, next, index) => {
  acc.push({
    key: index,
    data: next
  });
  return acc;
}, []);

return dataSource;

如何在react native分区列表中创建sectiondata

2 个答案: