получить данные с помощью React native sectionList

Я работаю с firestore и пытаюсь загрузить данные в свой компонент SectionList. Я хочу, чтобы разделы были разбиты по датам в моих данных firestore. Например, если пользователь забронировал дату 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,
   }); 

  }

react-native google-cloud-firestore react-native-sectionlist
person Kieran    schedule 13.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person Alexander Kuttig    schedule 13.09.2018
comment
Я получаю сообщение об ошибке, делая это по-вашему. Пока ничего не отодвинуто в историю. Это совершенно пустой массив. - person Kieran; 27.09.2018
comment
Вы можете прислать мне данные снимка? - person Alexander Kuttig; 27.09.2018
comment
Я только что добавил функцию @Alexander Kuttig - person Kieran; 28.09.2018