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

Question

我正在进行 api 调用并将响应存储在 state 中：

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 function 中，我想根据它的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的数据。

Answer 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}
/>
...

如果您的数据可能会更改，请确保使用extraData上的 extraData 属性。