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

时间:2021-01-25 09:36:28

标签: javascript reactjs react-native react-native-flatlist rerender

我刚开始学习 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}
        />
    )
}

0 个答案:

没有答案
相关问题