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

Question

I am making an api call and storing the response in a state:

var api_response = resp.docs
setShift(api_response);

api response:

"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",
    },
   
],

Then I am using FlatList to show the contents on screen:

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

Then in ItemView function I wanted to filter out the data based on it's shift_date , as in I want to show only those data which has a shift_date of either today or date has to be in future. I don't want to show data which has shift_date of past

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

I have consoled item , it comes like:

>>>>>>>>>>>>>>>>>> {"_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",},

I have written the calculation logic for finding data which does not have shift_date of past. I know that my calculation is right, but I am getting error undefined is not a function . I have marked ^^^ where I am getting error. How can I solve my problem and show the data in renderItem which does not include shift_date of past.

Answer 1

You should filter the data array, not the item .

Something like this

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

If your data might change, make sure to use the extraData prop on the FlatList.