react-native - 使用 react native sectionList 获取数据

Question

我正在使用 firestore，并且正在尝试将数据提取到我的 SectionList 组件中。我希望这些部分按我的 Firestore 数据中的日期进行分解。例如，如果用户预订了 9 月 12 日的日期，则部分标题应显示给定日期的上一个星期日（在本例中为 9 月 9 日）。我的问题是我不断收到错误“sectionlist length undefined”。我知道它需要是一个数组。如何将来自 firestore 的数组中的信息放入“数据”和“标题”道具部分。

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

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,
   }); 

  }

标签： react-nativegoogle-cloud-firestorereact-native-sectionlist

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 对象中获取标题字符串。