предыдущее состояние сохраняется даже после вызова setState () с новыми данными

Question

Я создаю приложение для задач, используя Firebase Cloud Firestore

Я добавил realtime listener для повторного рендеринга Flatlist с новыми задачами, если они были добавлены.

Но я сталкиваюсь такая проблема, что state tasks = [] добавляется к old state, что приводит к дублированию задач в Flatlist.

I wi sh, чтобы просто обновить sh весь список.

Это мой код для прослушивателя в реальном времени:

this.state = {
      tasks: [],
    };

fetchTasks() {
    try {
      this.setState({loading: true});
      const uid = auth().currentUser.uid;
      const tempTasks = [];
      firestore()
        .collection('Tasks')
        .where('uid', '==', `${uid}`)
        .onSnapshot(snapshot => {
          snapshot.forEach(doc => {
            console.log('realtime: ', JSON.stringify(doc.data(), null, 2));
            tempTasks.push({
              taskId: doc.id,
              data: doc.data(),
            });
          });
          this.setState({tasks: []});
          this.setState({tasks: tempTasks, loading: false});
          console.log('tasks: ', this.state.tasks.length);
        });
    } catch (e) {
      this.setState({loading: false});
      Alert.alert('Error fetching tasks', `${e}`, [{text: 'OK'}]);
      console.log('err in realtime', e);
    }
  }

render() {
   return (
      <FlatList
        data={this.state.tasks}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    )

Первоначально: одна задача

Финальная: после добавления задачи дублируйте задачу 1 также появляется, когда tasks = [] добавляется в состояние вместо обновления как для задачи 1, так и для задачи 2.

Журнал временных задач:

tempTasks [
  {
    "taskId": "FljhGGlsFN7yrD4GajDe",
    "data": {
      "status": "pending",
      "createdOn": {
        "_seconds": 1578761968,
        "_nanoseconds": 66000000
      },
      "title": "Task 1",
      "deadline": {
        "_seconds": 1578761940,
        "_nanoseconds": 0
      },
      "description": "apsdfplsdv",
      "author": "yashGmail",
      "uid": "t2kHrhIMbLggj2BpxKbJrPW9GL42"
    }
  },
  {
    "taskId": "GhF5nYalbTZZZH5j2lNO",
    "data": {
      "status": "pending",
      "createdOn": {
        "_seconds": 1578762188,
        "_nanoseconds": 226000000
      },
      "title": "Task 2",
      "deadline": {
        "_seconds": 1578761940,
        "_nanoseconds": 0
      },
      "description": "asdvlksdk",
      "author": "yashGmail",
      "uid": "t2kHrhIMbLggj2BpxKbJrPW9GL42"
    }
  }
]

Помощь будет очень признателен.

Answer 1

Вам нужно проверить, инициируется ли событие .onSnapshot(snapshot => {}) только с новыми элементами или оно запускается со всеми элементами. Из вашего кода ясно, что вы обновляете state.tasks с помощью tempTasks, поэтому очень ясно, что данные внутри tempTasks также являются дубликатами, причину, по которой я объяснил выше.

Вы можете попробуйте это, если onSnapshot запущен со всеми данными:

firestore()
.collection('Tasks')
.where('uid', '==', `${uid}`)
.onSnapshot(snapshot => {
  console.log(snapshot) // This to check what data is inside snapshot
  const tempTasks = snapshot.map(doc => ({
    taskId: doc.id,
    data: doc.data(),
  }))
  this.setState({tasks: tempTasks, loading: false});
})