移除 React 状态中的嵌套对象

Question

在 React 中，我有一些过滤器处于以下状态：

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

在 onClick-Handler 函数中，我收到以下对象之一：

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

有没有办法使用 setState 从我的状态中删除该对象？我目前尝试使用 'find' 来获取状态本身内的对象，但我不确定如何删除它：

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

Answer 1

看起来这是一个反应状态管理问题，所以你想避免突变，我的意思是你不想操作原始数组对象。因此，您想创建一个新数组，但不包括要删除的数组。喜欢：

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

那么你要继续构造新的状态对象，把这个数组放在状态对象上它所属的地方。

我认为您在问题中粘贴的状态对象不正确，所以我并不是要猜测它的正确结构。

移除 React 状态中的嵌套对象

Remove nested object in React State

javascript

state

nested

reactjs

nested-object