Question

我有这样的数据结构：

const _ = require('lodash');

const bills = [
  {year:2021, month:5, bill:'bill in 2021 may'},
  {year:2018, month:1, bill:'bill in 2018 jan'},
  {year:2019, month:1, bill:'bill in 2019 jan'},
  {year:2018, month:2, bill:'bill in 2018 feb'},
  {year:2019, month:10,bill:'bill in 2019 oct'},
  {year:2019, month:2, bill:'bill in 2019 feb'},
  {year:2019, month:6, bill:'bill in 2019 jun'},
  {year:2020, month:11,bill:'bill in 2020 nov'}
];

我希望使用原生基础

的文本或卡片组件显示如下

2018
  1
    bill in 2018 jan
  2
    bill in 2018 feb
2019
  1
    bill in 2019 jan
  2
    bill in 2019 feb
  6
    bill in 2019 jun
  10
    bill in 2019 oct
2020
  11
    bill in 2020 nov
2021
  5
    bill in 2021 may

我的代码在下面使用lodash库生成以上内容并在终端中显示

// sort the data first
let arrSortedTasks = _.orderBy(tasks, ['year', 'month'],['asc']);
// get all the different year from the data
let arrUniqYear = _.uniqBy(arrSortedTasks, 'year');
// get all the different month from the data
let arrUniqMonth = _.uniqBy(arrSortedTasks, 'month');
// take out only the value of the year
arrUniqYear =_.map(arrUniqYear, 'year');
// take out only the value of the month
arrUniqMonth =_.map(arrUniqMonth, 'month');

    let taskList = '';

    for (let year of arrUniqYear) {

        console.log(year);

        for (let month of arrUniqMonth) {

          let displayMonth = false;

          for (let obj of arrSortedTasks) {     

            if (obj.year === year && obj.month === month) {

                taskList = taskList + obj.task;

                displayMonth = true;

            } 

          }

          if (displayMonth) {

             console.log("  " + month);

          }

          if (taskList.length > 0) {

             console.log("    " + taskList);

          }

          taskList = '';

        }
    }

我们如何以native-base显示react-native组件？如果有太多代码感叹，请不要让我发帖。我尝试了一些买错误的方法，但无法弄清楚。

Answer 1

我最终在渲染中使用数组作为返回对象

g++ a.cpp -Wall -O2

Answer 2

不确定您计划如何在UI中呈现它，但是如果您想拥有这样的数据结构，则需要对其进行分组（如果尚未对其进行排序，则按monhts排序）

_(bills).groupBy('year').map((v,k)=> ({year: k, docs: _.sortBy(v,'month')})).value()

它将为您提供另一个数组，其中有年份，abd文档作为嵌套数组，保存当年的所有文档，以便您可以再次对此进行重复。

＆＃13;

const bills = [
  {year:2021, month:5, bill:'bill in 2021 may'},
  {year:2018, month:1, bill:'bill in 2018 jan'},
  {year:2019, month:1, bill:'bill in 2019 jan'},
  {year:2018, month:2, bill:'bill in 2018 feb'},
  {year:2019, month:10,bill:'bill in 2019 oct'},
  {year:2019, month:2, bill:'bill in 2019 feb'},
  {year:2019, month:6, bill:'bill in 2019 jun'},
  {year:2020, month:11,bill:'bill in 2020 nov'}
]
let groupedDoc = _(bills).groupBy('year').map((v,year)=> ({year, docs: _.sortBy(v,'month')})).value();
console.log(groupedDoc);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

＆＃13;

这是一个工作片段：

Answer 3

我认为你应该这样做：

const gropuByYear = _.groupBy(bills,'year'); console.log(_.map(groupByYear, groups => groups.forEach(group=>(<View> {obj.bill}</View>))) 即使你可以先订购年份desc然后做循环祝你好运

Answer 4

您需要查看React Native的SectionList。

结帐this example和cuiyueshuai以获取更多实际示例。

SectionList演示：

 <SectionList 
  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} 
  renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
  sections={[ 
   { title: 'Title1', data: ['item1', 'item2'] }, 
   { title: 'Title2', data: ['item3', 'item4'] }, 
   { title: 'Title3', data: ['item5', 'item6'] }, 
   ]} 
  keyExtractor={(item, index) => item + index} />

React Native创建具有多个条件的组件

4 个答案: