React Native中RenderItem问题求助：选中时段后移除渲染列表项

Hey there! I see you're trying to remove a time slot from your rendered list once it's been processed in the database. The core fix here lies in managing your data source properly—since FlatList renders items based on the data prop you pass to it, we just need to update that data to exclude processed slots. Let's break this down step by step:

1. Choose a State Management Approach #

You have two straightforward ways to handle this, depending on how you want to track processed slots:

Option 1: Track Processed Slots with a State Array #

First, add a state variable to keep track of slots that have been successfully processed:

import { useState } from 'react';

// Initialize with an empty array to store processed time strings
const [processedSlots, setProcessedSlots] = useState([]);

When your database finishes handling a slot (inside your handleClientChoose function or the database callback), add the slot's formatted string to this state. Using a string avoids issues with comparing moment object references:

const handleClientChoose = async (item) => {
  // Run your existing database processing logic here
  await yourDatabaseSaveFunction(item);

  // Convert the slot to a consistent string format (matches how you display it)
  const processedTime = moment(item).format("LT");
  // Update the processed slots state
  setProcessedSlots(prevSlots => [...prevSlots, processedTime]);
};

Option 2: Directly Maintain an Available Hours List #

Alternatively, you can keep a state variable for the list of available hours, and remove the processed slot directly from this list:

// Initialize with your original list of time slots
const [availableHours, setAvailableHours] = useState(yourOriginalHourList);

const handleClientChoose = async (item) => {
  await yourDatabaseSaveFunction(item);

  // Filter out the processed slot from the available list
  setAvailableHours(prevHours => 
    prevHours.filter(hour => moment(hour).format("LT") !== moment(item).format("LT"))
  );
};

2. Pass the Filtered Data to FlatList #

• If you went with Option 1, filter your original hour list to exclude processed slots before passing it to FlatList:

  const filteredHours = yourOriginalHourList.filter(hour => {
    const hourString = moment(hour).format("LT");
    return !processedSlots.includes(hourString);
  });
  
  // Use filteredHours as the data source for your FlatList
  <FlatList
    data={filteredHours}
    renderItem={renderHours}
    // Add your other FlatList props here
  />
  

• If you chose Option 2, just pass the availableHours state directly to FlatList—no extra filtering needed:

  <FlatList
    data={availableHours}
    renderItem={renderHours}
    // Add your other FlatList props here
  />
  

Key Tips to Avoid Issues #

• Avoid Object Reference Bugs: Since moment objects are references, comparing them directly with includes won't work. Always convert them to a consistent string format (like "LT") for comparisons.
• Wait for Database Completion: Make sure you update the state after the database operation finishes (using await for async calls) so you don't remove the slot before processing is actually done.
• Automatic Re-renders: React will automatically re-render the FlatList when the state (processedSlots or availableHours) changes, so the processed slot will disappear from the list right away.

If you're dealing with more complex scenarios—like real-time backend updates or dynamically fetched time slots—feel free to share more details and we can adjust this approach!

内容的提问来源于stack exchange，提问作者user8395584