извлекать данные, используя реакционную нативную sectionList - PullRequest
Новая
       31

извлекать данные, используя реакционную нативную sectionList

0 голосов
/ 13 сентября 2018

Я работаю с firestore и пытаюсь извлечь данные в мой компонент SectionList. Я хочу, чтобы разделы были разбиты по датам в моих данных пожарного магазина. Например, если пользователь забронировал дату 12 сентября, в заголовке раздела должно отображаться предыдущее воскресенье (в данном случае 9 сентября) для данной даты. Моя проблема в том, что я получаю сообщение об ошибке "длина списка разделов не определена". Я понимаю, что это должен быть массив. Как разместить информацию из массива из firestore в раздел «data» и «title» реквизита.

Я уже извлек данные из коллекции и поместил их в 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,
   }); 

  }

1 Ответ

0 голосов
/ 13 сентября 2018

Я думаю, ваше недоразумение в том, что 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.

...