如何在反应原生中过滤FlatList中的项目

Posted 2023-02-16

【中文标题】如何在反应原生中过滤FlatList中的项目

【英文标题】：How to filter items in FlatList in react native

【发布时间】：2022-01-02 19:57:12

【问题描述】：

我正在进行 api 调用并将响应存储在一个状态中：

var api_response = resp.docs
setShift(api_response);

api 响应：

"docs": [
    
        "_id": "1",
        "description": null,
        "shift_date": "2021-12-03T18:30:00.000Z",
    ,
    
        "_id": "2",
        "description": null,
        "shift_date": "2021-12-03T18:30:00.000Z",
    ,
    
        "_id": "3",
        "description": null,
        "shift_date": "2021-11-03T18:30:00.000Z",
    ,
    
        "_id": "4",
        "description": null,
        "shift_date": "2021-11-03T18:30:00.000Z",
    ,
   
],

然后我使用 FlatList 在屏幕上显示内容：

<FlatList
    data=shift
    onRefresh=getShiftDetails
    refreshing=isLoading
    onEndReached=loadNextPage
    ListEmptyComponent=
        <ErrorComponent
            text='List is empty!'
            style=minHeight: 250
        />
    
    renderItem=ItemView
/>

然后在ItemView 函数中，我想根据它的shift_date 过滤掉数据，因为我只想显示那些具有shift_date 的今天或日期必须在未来的数据。我不想显示过去有 shift_date 的数据

const ItemView = (item) => 

//calculation to eliminate data which has `shift_date` in past::::

    var todayy = moment().utcOffset(0, false);
    var wantedData = item.filter(function (i: any) 
                        ^^^
    const element = i.shift_date;
    var dateDiff = todayy.diff(element, 'days') * -1;
    return dateDiff >= 0;
    );
console.log('>>>>>>>>>>>>>>>>>>', item);

    return (
        <View key=item._id + '--'>
            <View>
                <ShiftComponent
                    id=item
                    dateOfShift=item.shift_date
                />
            </View>
        </View>
    );
;

我已经安慰item，是这样的：

>>>>>>>>>>>>>>>>>> "_id": "1","description": null,"shift_date": "2021-12-03T18:30:00.000Z",,
>>>>>>>>>>>>>>>>>> "_id": "2", "description": null, "shift_date": "2021-12-03T18:30:00.000Z",,
>>>>>>>>>>>>>>>>>> "_id": "3","description": null,"shift_date": "2021-11-03T18:30:00.000Z",,
>>>>>>>>>>>>>>>>>> "_id": "4","description": null,"shift_date": "2021-11-03T18:30:00.000Z",,

我已经编写了用于查找过去没有shift_date 的数据的计算逻辑。 我知道我的计算是正确的，但我收到错误undefined is not a function。我已经标记了^^^ 我收到错误的地方。如何解决我的问题并在 renderItem 中显示不包括过去的 shift_date 的数据。

【参考方案1】：

您应该过滤data 数组，而不是item。

类似的东西

const currentTime = new Date().toISOString();

const filteredShifts = shift.docs.filter((x) => x.shift_date > currentTime);


const ItemView = (item) => 
    return (
        <View key=item._id + '--'>
            <View>
                <ShiftComponent
                    id=item
                    dateOfShift=item.shift_date
                />
            </View>
        </View>
    );
;

...
<FlatList
    data=filteredShifts
    onRefresh=getShiftDetails
    refreshing=isLoading
    onEndReached=loadNextPage
    ListEmptyComponent=
        <ErrorComponent
            text='List is empty!'
            style=minHeight: 250
        />
    
    renderItem=ItemView
/>
...

如果您的数据可能发生变化，请确保使用 FlatList 上的 extraData 属性。