我正在使用react-native 日历根据点击日期过滤记录列表,但它会循环在我包含在flatList中循环的记录<Agenda> component
源代码
function Spent({expenseData, dates, direct, handleDateChange}) {
const {expense, agenda, card, expContents, space, cardContent, agendaTheme} =
styles;
const reduce = (prevValue, currValue) =>
parseInt(prevValue) + parseInt(currValue);
const totalAmount = direct
? direct.map(({amount}) => amount).reduce(reduce, 0)
: [];
return (
<View style={expense}>
<Agenda
items={expenseData ? expenseData : [{}]}
futureScrollRange={5}
pastScrollRange={5}
renderDay={(day, item) => <View />}
style={[agenda]}
theme={agendaTheme}
onDayPress={handleDateChange}
renderItem={({item, firstItemInDay}) => (
<>
<Card style={[card, space]}>
<View style={cardContent}>
<CardComponent
type={'expense'}
month={moment().format('MMMM')}
money={totalAmount}
currency={'Rwf'}
/>
<CardComponent money={'8000'} currency={'Rwf'} />
</View>
</Card>
<FlatList
style={[expContents, space]}
numColumns={1}
ItemSeparatorComponent={
Platform.OS !== 'android' &&
(({highlighted}) => (
<View
style={[
{backgoundColor: 'red'},
highlighted && {marginLeft: 0},
]}
/>
))
}
data={direct}
renderItem={({item, index, separators}) => (
<ExpenseItem
amount={item.amount}
category={item.category}
title={item.title}
currency={'Rwf'}
/>
)}
/>
</>
)}
/>
</View>
);
}
export default Spent;