移除 React State 中的嵌套对象

Question

In React I have some filters in a state:

this.state {
   filters: [countries: {parameterName: 'country', value: 'England'}, 
                        {parameterName: 'country', value: 'Greenland'}]
}

In an onClick-Handler function I receive one of these objects:

removeFilter(filter) {     
        console.log('remove->', filter);
        // outputs: {value: 'England', parameterName: 'country'} 
}

Is there a way to remove that object from my state using setState? I currently try using 'find' to get the object inside the state itself but I'm not sure how to remove it:

let found ? this.state.filters[filter.parameterName].find(element => element.value === filter.value))

Answer 1

Looks like this is a react state management question, so you want to avoid mutation, by that I mean that you don't want to manipulate the original array object. So you want to create a new array excluding the one that you want to remove. Like:

const newFilter = countryFilter.filter(f => f.value !== filter.value);

then you want to keep constructing the new state object, and place this array where it belongs on the state object.

I think the state object you pasted in your question is not correct, so I am not trying to guess the correct structure of it.