javascript - Rerender Flatlist after Call api then setState

Question

I just started learning React native, and want to render FlaList after setState. I am try to call Api to get Data and then I sorting that data but the FlatList is not rerender with newData. I also try extraData but nothing happen. Where am I missing?

Thank for your help.

function HomeScreen(props) {
    const {transactions = []} = useSelector(selectors.transactions) || [];
    const [listTransaction, setListTransaction] = useState([]);

    useEffect(() => {
        dispatch(BalanceActions.balanceRequest()); // This is my call Api
  
        sortListTransaction(); // I call sortFunc after that
    }, []);

    const sortListTransaction = () => { // In this function I group by date the array of the result Api
        let groups = [];

        transaction.forEach((item) => {
            let date = moment(item.date).format('MM/DD/YYYY');
            if (date in groups) {
                groups[date].push(item);
            } else {
                groups[date] = new Array(item);
            }
        });

        setListTransaction(groups);
    };

    const _renderItem = ({item}) => {
        return <BodyContent data={item} />;
    };

    // Then my FlatList like:
    return (
        <FlatList
            data={listTransaction}
            keyExtractor={(item) => item.id}
            renderItem={_renderItem}
            extraData={listTransaction}
        />
    )
}

question from:https://stackoverflow.com/questions/65882153/rerender-flatlist-after-call-api-then-setstate

Answer 1

Waitting for answers