如何将特定的 object 从 FlatList 传递到 function，以便我可以将其从 Firestore 中删除？

Question

我有一个电影预订观察列表，当我单击 FlatList 渲染组件之一的按钮时，我想将 object 传递给删除 function，然后将其从 Firestore 中删除。 我有点不知道如何做到这一点。 这是我到目前为止所拥有的：

const WatchList = () => {

  const uid = auth.currentUser.uid;
  const docRef = doc(db, 'users', uid);
  const [user, setUser] = useState({});
  const [watched, setWatched] = useState(true);
  const [text, setText] = useState('Watched movies');
  const [filteredBookings, setFilteredBookings] = useState(bookings);
  const bookingsRef = collection(db, "booking");

  const [bookings, setBookings] = useState({});
  useEffect(() => {
    getUser();
    getBookings();
  },[])

  const getUser = async () => {
    const snap = await getDoc(docRef)
    setUser({user, ...snap.data()})
  }

  const getBookings = async () => {
     const q = query(bookingsRef, where("users","array-contains",auth.currentUser.uid));
     const unsubscribe = onSnapshot(q, (querySnapshot) => {
     const a = [];
     querySnapshot.forEach((doc) => {            
     a.push(doc.data());
  });
     setBookings(querySnapshot.docs);
    });
  }

const deleteBooking = (item) => {
    console.log(item.data.().title)
}

  return (
<View>
  <View>
    <Text>{text}</Text>
  </View>
  
  <FlatList
    data = {filteredBookings}
    numColumns = {1}

    renderItem  = {({item}) => (
      <View>
      <View>
        <Text>{item.data().movie}</Text>
        <Text>{item.data().day} - {item.data().showtime}</Text>
      </View>

      <View>
        <TouchableOpacity onPress = {() => {deleteBooking(item)}}>
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
      </View>
    )}
  />
      </View>
  )
}

export default WatchList`

我一直在尝试传递一个项目以将其显示在控制台日志中，以查看我是否首先获得了正确的项目，但它不起作用，所以我真的很感激一些指示。 谢谢！

Answer 1

在您定义为 deleteBooking() 的删除按钮的 onPress 方法中，您也会获得索引。 您可以重写为 deleteBooking(item,index)。 现在在您的定义中使用数组的拼接方法。 例如arrayName.splice(index,1)这将删除给定索引的记录。 对于您的数组，它应该类似于bookings.splice(index,1) 。 这里 1 表示要从给定索引中删除多少条记录。

让我知道它是否适合你。