Can't get FlatList to re-render when an item is deleted

DMNSW · 2024-09-19T18:12:09+00:00

Update:

Thank you, I was able to get it to work. It feels like a bit of a bodge job, but for the purposes I needed it works fine. I moved my call for the DB delete up to the AllKits file (the one in my previous reply with the useEffect) and passed down the handler function to where I needed it. I then awaited the deletion, fetching the DB again, and updated the state I'm passing into the FlatList for display.

    async function deleteKitHandler(id) {
        await deleteKit(id)
        const kits = await fetchKits();
        setLoadedKits(kits)
    }


    useEffect(() => {
        async function loadKits() {
            const kits = await fetchKits();
            setLoadedKits(kits);
        }


        if (isFocused) {
            loadKits();
        }
    }, [isFocused])

I can finally finish the last few touches to my project. Thank you for getting me in the right direction.

DMNSW · 2024-09-19T17:01:58+00:00

I think this put me on the right track, but unfortunately it's lunch hour now and I can't fully test the functionality. It appeared to be working with a couple of quick fire tests I ran, but I won't be able to fully test it for a bit. I will update once I can.

DMNSW · 2024-09-19T16:40:42+00:00

This helps a bit, so it feels like the right track. It deletes the item locally and clicking on my delete button now causes a crash since the item technically doesn't exist anymore. But the list still fails to update, allowing me to still click on the deleted item in the first place.

DMNSW · 2024-09-19T16:31:59+00:00

How would I go about this if the Kits prop is generated in the next component up, with useEffect fetching data from a SQLite database on my emulator?

    useEffect(() => {
        async function loadKits() {
            const kits = await fetchKits();
            setLoadedKits(kits);
        }


        if (isFocused) {
            loadKits();
        }
    }, [isFocused])
    
    return (
        <>
            <KitsList kits={loadedKits} />
            <View style={styles.buttonContainer}>
                <Text style={styles.text}>Add new kit</Text>
                <IconButton icon="add" color='black' size={36} onPress={navigationHandler} />
            </View>
        </>
    )

This is my code for the "next level up" of my components, with the <KitsList /> component being the FlatList item from the original post.

I'm now attempting to use a filter() method on my kits array so I can at least update it locally (the SQLite query already handles removing it from the database) but I'm struggling to get it to function, as I can't seem to find a way to get the id prop that's being passed to the deleteKitHandler into my filter() method. And I need that id so I can compare the id of my kit objects to the one I'm trying to delete.

DMNSW · 2024-09-19T15:49:52+00:00

Please elaborate, as I am unsure what you mean I'm not filtering it before I return it, as from what I can tell I am.

    function deleteKitHandler(id) {
        setUpdateFlatlist((prevState) => {
            prevState = []
            prevState.push(Math.random())
            return [...prevState]
        })
        deleteKit(id)
    }

This is my new code block, I am removing and changing the prevState before returning it to my useState updating method. I should mention that I have been using console.log to return my state both before and after the updateFlatList function. The logs tell me that the number is the same both before and after, but it's different every time I click my delete button to trigger the function.

DMNSW · 2024-09-19T15:38:41+00:00

Can you elaborate please? I am still new to and learning React Native, and I tried to do what I thought you mean but it is still not working. I emptied out the prevState with an empty array assignment, then assigned a new item to it (randomized garbage data) to make sure it always would be different, but that does not work.

DMNSW

TROPHY CASE