Массив, хранящийся в состоянии, не обновляемом должным образом из child_removed firebase

# #javascript #arrays #firebase-realtime-database #react-native-android #react-state

Вопрос:

 import React, {useState, useEffect} from 'react';
import {FlatList, Text} from 'react-native';

export const Feed = () => {
  // State
  const [posts, setPosts] = useState([]);

  // Member Functions
  const deletePostFromList = removeItemId => {
    const mNewPosts = posts.filter(post => post.id !== removeItemId);
    setPosts(mNewPosts);
  };

  // Effects
  useEffect(() => {
    database()
      .ref(`/feed/${currentUid}`)
      .orderByChild('createdOn')
      .on('child_removed', snap => {
        //
        deletePostFromList(snap.key);
      });

    //   Cleanup
    return () => {};
  }, []);

  // Render
  return (
    <FlatList data={posts} renderItem={({item}) => <Text>{item.id}</Text>} />
  );
};
 

Поведение, которое я хочу: когда child_removed вызывается, я хочу удалить этот элемент из массива с помощью postId .

Но всякий deletePostFromList раз , когда вызывается from child_removed , сообщения устанавливаются неправильно и становятся пустым массивом. Он показывает правильный вывод, если я log изнутри deletePostFromList . child_removed и setPosts то и другое асинхронно. Я не могу понять, что я делаю не так в этом простом коде. Как я могу заставить его работать правильно?