Obtaining unique entries only using setState?

Question

I am currently able to display my meals output, however, there are duplicates that show up. To compensate, I tried to use the logic seen here: Removing duplicate array values and then storing them [react]. However, now my list disappears. If I can get some help, I would much appreciate it as I have been trying to debug this for quite a bit. Thank you!

Relevant code:

  const [meals, setMeals] = React.useState([]);

    useEffect(() => {
        getMeals();
    }, []);

    function getMeals() {
        console.log(route.params.DiningID);
        fetch(`a https url`, {
            method: 'GET',
            headers : {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
        })
            .then(
                function(response) {
                    if (response.status === 200 || response.status === 201) {
                        // Successful GET
                        // Set Fields to correct values
                        response.json().then(function(data) {

                            setMeals(data.map(menuItem => ({ label: menuItem.menu_item.item_name, value: menuItem.menu_item.menu_item_id })));
                            // having trouble with the unique output
                            setMeals(meals
                                .map(e => e['value'])
                                 // store the keys of the unique objects
                                 .map((e, i, final) => final.indexOf(e) === i && i)
                                 // eliminate the dead keys & store unique objects
                                 .filter(e => meals[e]).map(e => meals[e]));
                        });
                    } else {
                        console.log('Getting Dining Menu Items like there was a problem. Status Code: ' +
                            response.status);
                    }
                }
            )
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
    }

Henry Ecker · Accepted Answer · 2021-03-29T17:55:31.267

It's important to remember that the setMeals command is asynchronous.

See: useState set method not reflecting change immediately .

For this reason, you call setMeals on the new data, then immediately after refer to meals, but it is possible (likely) that meals does not contain the new values yet.

Since meals is initialized to an empty array [], the map and filter chain results in another empty array []. You then call setMeals on an empty array, which is why your list disappears.

In a synchronous context, you're performing an operation similar to:

meals = [...A Bunch of New Data]
meals = []

The second setMeals overwrites the data you tried to add.

You might try to map and filter the data directly and make a single setMeals call.

setMeals(data
    .map(e => e.menu_item.menu_item_id)
    .map((e, i, final) => final.indexOf(e) === i && i)
    .filter(e => data[e])
    .map(e => data[e])
    .map(menuItem => ({
        label: menuItem.menu_item.item_name,
        value: menuItem.menu_item.menu_item_id
    })));

Obtaining unique entries only using setState?

1 Answers1