Question

我正在使用Firestore，并且尝试将数据提取到我的SectionList组件中。我希望这些部分按我的Firestore数据中的日期分类。例如，如果用户预订了9月12日的日期，则节标题应显示给定日期的前一个星期日（在这种情况下为9月9日）。我的问题是我不断收到错误“节列表长度未定义”。我了解它必须是一个数组。如何将来自Firestore的数组中的信息放入“数据”和“标题”道具部分。

我已经从集合中提取数据并将其放入this.state。我需要将日期信息插入我的listlist组件的各个部分。

onCollectionUpdate = (querySnapshot) => {
  var history = this.state.history;
  let that = this;
  querySnapshot.forEach((doc) => {
    const { date, displayName, hours, image} = doc.data();
    history.push({
      key: doc.id,
      date: doc.data().date,
      displayName: doc.data().displayName,
      hours: doc.data().hours, 
      image: doc.data().image, 
      });
    });
  that.setState({ 
    history,
    sections,
    loading: false,
 });

}

我能够获得要填充的列表，但是每个项目都有自己的视图。我正在设法将同一周内的所有日期归入该周视图组的周日。这是我的功能，我知道我需要操纵数组推送的方式。

   onCollectionUpdate = (querySnapshot) => {
  // make copy of history object
  let that = this;
  let history = this.state.history;
  let sectionExist = false;
  //let history = JSON.stringify(JSON.parse(this.state.history);
  querySnapshot.forEach((doc) => {
    // find last sunday
    var dates = moment(doc.data().date);
    var weekOf = dates.startOf('week').valueOf();
    var weekOfFormat = moment(weekOf).format('MMM Do')
    console.log(doc);
    history.push({
      title: weekOfFormat,
        data: [{
        key: doc.id,
        date: doc.data().date,
        displayName: doc.data().displayName,
        hours: doc.data().hours, 
        image: doc.data().image, 
        }]
        });
      });
    that.setState({ 
      history,
      loading: false,
   }); 

  }

Answer 1

我认为您的误解是，SectionList不需要数组项。它需要一个节数组，每个节都有一个项目（数据）数组。

您的代码应如下所示：

onCollectionUpdate = (querySnapshot) => {
  // make copy of history object
  let history = JSON.stringify(JSON.parse(this.state.history);
  querySnapshot.forEach((doc) => {
    // find last sunday
    let now = new Date(doc.data().date);
    let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    let lastSunday = new Date(today.setDate(today.getDate()-today.getDay()));
    let lastSundayString = convertDateToMyStringFormat(lastSunday);
    // check if section with this date as section title exists and push to that data if so
    let sectionExists = false;
    for(let i = 0; i < history.length; i++;) {
      if(history[i].title === lastSundayString){
        sectionExists = true;
        history[i].data.push({
          key: doc.id,
          date: doc.data().date,
          displayName: doc.data().displayName,
          hours: doc.data().hours, 
          image: doc.data().image, 
        });
        break;
      }
    }
    // add new section if no such section found
    if(!sectionExists){
      history.push({
        title: lastSundayString,
        data: [{
          key: doc.id,
          date: doc.data().date,
          displayName: doc.data().displayName,
          hours: doc.data().hours, 
          image: doc.data().image, 
        }]
      });
    }
  });
  this.setState({ 
    history,
    loading: false,
  });
}

您必须实现自己的convertDateToMyStringFormat函数，才能从Javascript Date对象中获取标题字符串。

使用react native sectionList获取数据

1 个答案: