javascript - 在调用 api 然后 setState 后重新渲染平面列表

Question

刚开始学习React Native，想在setState之后渲染FlaList。我尝试调用 Api 来获取数据，然后对该数据进行排序，但 FlatList 不使用 newData 重新呈现。我也尝试过extraData，但没有任何反应。我在哪里失踪？

感谢您的帮助。

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}
        />
    )
}

标签： javascriptreactjsreact-nativereact-native-flatlistrerender