如何将 React state 与动态过滤器组件结合使用？

Question

I have a filter component that filters a set of data. I want to output the filtered data to the DOM by using the filtered object in the local state. I cannot figure out how to use state without reseting the filter input and I can also not figure out how to output the filtered data to the DOM without using state.

This is the dataset:

const data = [
{ Name: John,
Tags: [walking, senior, Amsterdam]
},
{Name: Chris,
Tags: [biking, junior, The Hague]
},
{Name: Marc,
Tags: [walking, junior, Amsterdam]
}

I want to filter this dataset based on the tags the client selects:

<select data-categorie={hobby} onChange={filterTagHandler}>
<option value='all'>All><option>
<option value='walking'>Walking><option>
<option value='biking'>Biking><option>
<select>

<select data-categorie={age} onChange={filterTagHandler}>
<option value='all'>All><option>
<option value='junior'>Junior><option>
<option value='senior'>Senior><option>
<select>

<select data-categorie={city} onChange={filterTagHandler}>
<option value='all'>All><option>
<option value='amsterdam'>Amsterdam><option>
<option value='the hague'>The Hague><option>
<select>

The filter select components are dynamically generated from client input. Therefor there is just the filterTagHandler instead of a nameHandler, hobbyHandler, cityHandler.

First thing is to handle the selected tags and create an array from the selected tags:

const selectedTagsArray = []

    const filterTagHandler = (e) => {
        const option = e.target.options

        const tagSelected = option[option.selectedIndex].value
        const categorie = e.target.dataset.categorie

        selectedTagsArray.push(tagSelected)

        // Handle new option in categorie
        handleNewOptionInCategorie(categorie, tagSelected)

        // Handle all option
        handleAllOption(tagSelected)

        // Filter items
        filterItems(selectedTagsArray)
    }

So the first thing that happens in this onChange function is the selected tag is push to the selectedTagsArray. If I would set the selectedTagsArray to state:

const [tagsArray, setTagsArray] = useState([])

setTagsArray(selectedTagsArray)

the selectedTagsArray would be emptied every time the client selects a new filter option, because the state get's updated. So that's no good.

So first I use some logic to update the selectTagsArray if the client selects a new option within a categorie (select component):

const handleNewOptionInCategorie = (categorie, tagSelected) => {
        filterTags && filterTags[categorie].forEach((tag) => {
            if(selectedTagsArray.includes(tag.Tag) && tag.Tag !== tagSelected){
                const index = selectedTagsArray.indexOf(tag.Tag)
                selectedTagsArray.splice(index, 1)
            }
        })
    }

Then I handle the 'All' option:

const handleAllOption = (tagSelected) => {
        if(tagSelected === 'All'){
            const index = selectedTagsArray.indexOf(tagSelected)
            selectedTagsArray.splice(index, 1)
        }
    }

This all works fine (as long as there is no state change along the way).

Next I filter the data based on the selected tags:

const filterItems = (array) => {

    const newArray = []

    data.forEach(item => {

        if(array.every(tag => item.Tags.includes(tag))){
            newArray.push(item)
        }
    })
}

So this gives me the filtered data in the newArray object. The next logical step now would be to:

const [filteredItems, setFilteredItems] = useState(data)

setFilteredItems(newArray)

This has to be done inside the filteredItems object.

But I cannot use state here as well, since the filterItems function is called inside the filterTaghandler onChange and so every time the client selects a new option the state updates and the selectedTagsArray is emptied.

So, how can I use the newArray object to update the DOM or how can I use state without emptying the selectedTagsArray?

Answer 1

I solved it by updating the state with the state. It's a pretty simple solution, but it works.

So instead of updating the selectedTagsArray if update the state like:

setFilterTags(...filterTags, tagSelected). I'm using an onClick event to filter instead of it being called in the onChange.

I can now use the filterTags state to filter the data and update the data state to update the DOM.