Reactjs 使用多个条件响应本机创建组件

我的数据结构如下：

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 = '';

        }
    }

---

如何在react native和native base中显示组件？所以，如果有太多的代码，请不要让我发布。我尝试了几种方法，但都出现了错误，无法解决

我认为你应该：

const gropuByYear=uu.groupBy（账单，'year'）；
console.log（u.map）（groupByYear，groups=>
groups.forEach（group=>（{obj.bill}））

---

即使您可以先订购year desc，然后再执行循环祝您好运

您需要查看React Native

检查并查看更多实际示例

部分列表演示：

 <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} />

{item}
renderSectionHeader={（{section:{title}}}）=>{title}
节={[
{title:'Title1'，数据：['item1'，'item2']}，
{title:'Title2'，数据：['item3'，'item4']}，
{title:'Title3'，数据：['item5'，'item6']}，
]} 
keyExtractor={（项目，索引）=>item+index}/>

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

  renderBillsSection() {

    const { bills } = this.props;

    if(bills || bills.length > 0 ) {

      let arrSortedTasks = _.orderBy(tasks, ['year', 'month'],['asc']);
      let arrUniqYear = _.uniqBy(arrSortedTasks, 'year');
      let arrUniqMonth = _.uniqBy(arrSortedTasks, 'month');
      let billList = '', arr = [], yearIndex = 0, monthIndex = 0, billIndex = 0;

      arrUniqYear = _.map(arrUniqYear, 'year');
      arrUniqMonth = _.map(arrUniqMonth, 'month');

      for (let year of arrUniqYear) {

          arr.push(<Text key="{yearIndex}">{year}</Text>)

          yearIndex++

          for (let month of arrUniqMonth) {

            let displayMonth = false;

            for (let obj of arrSortedTasks) {     

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

                billList = billList + obj.task

                displayMonth = true

              } 

            }

            if (displayMonth) {

               arr.push(<Text key="{monthIndex}" style={{marginLeft:10}}>{month}</Text>)

               monthIndex++

            }

            if (billList.length > 0) {

               arr.push(<Text key="{taskIndex}" style={{marginLeft:20}}>{billList}</Text>)

               billIndex++

            }

            billList = '';            

          }


      }

      return arr;

    }

  }

renderBillsSection（）{
const{bills}=this.props；
如果（bills | | bills.length>0）{
让arrSortedTasks=u.orderBy（任务，['year'，'month'，['asc']）；
让arrUniqYear=uu.uniqBy（arrSortedTasks，'year'）；
让arruiqmonth=uqby（arrSortedTasks，'month'）；
让billList=''，arr=[]，yearIndex=0，monthIndex=0，billIndex=0；
arrUniqYear=uqyear.map（arrUniqYear，'year'）；
arruiqmonth=uqmonth.map（arruiqmonth，'month'）；
年（阿鲁尼克年）{
arr.push（{year}）
年鉴++
月份（每月一次）{
设displayMonth=false；
对于（让arrSortedTasks的obj）{
如果（目标年===年和目标月===月）{
billList=billList+obj.task
displayMonth=true
} 
}
如果（显示月份）{
arr.push（{month}）
蒙辛德克斯++
}
如果（billList.length>0）{
arr.push（{billList}）
比尔指数++
}
billList=''；
}
}
返回arr；
}
}

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

(bills.groupBy（'year'）.map（（v，k）=>（{year:k，docs:u.sortBy（v，'month'）））））.value（）

它将为您提供另一个数组，其中您有一年，abd docs作为嵌套数组保存该年的所有文档，这样您就可以再次重复该年

const bills=[
{年份：2021年，月份：5，法案：'2021年5月法案'，
{年份：2018，月份：1，法案：'2018年1月法案'，
{年份：2019，月份：1，法案：'2019年1月法案'，
{年份：2018，月份：2，法案：'2018年2月法案'，
{年份：2019，月份：10，法案：'2019年10月法案'，
{年份：2019年，月份：2，法案：'2019年2月法案'，
{年份：2019，月份：6，法案：'2019年6月法案'，
{年份：2020，月份：11，法案：'2020年11月法案}
]
设groupedDoc=uz（bills）.groupBy（'year'）.map（（v，year）=>（{year，docs:uz.sortBy（v，'month'）））））.value（）；
console.log（groupedDoc）；

---

需要显示月份年份就像标题数组，月份也是每年下的子标题数组，账单就像每个月下的内容列表SectionList不适合处理mineSection的简单数据结构是实现您想要显示的内容的方法。您需要按照Section创建数组n需要。您也可以使用来显示数据。但循环不是一个好的选择。