Question

我正在一个ReactJS项目中，并且在我的状态下有一个filterGroupsData属性。这是一个对象数组，每个对象都有一个filters属性，该属性是一个字符串值数组。见下文：

filterGroupsData:[
    {"key":1532957059388,"id":1532957059388,"filters":[]},        
    {"key":1532957059612,"id":1532957059612,"filters":[]},        
    {"key":1532957059847,"id":1532957059847,"filters":[]}
]

如何向具有给定id的对象的filter属性添加元素？

我尝试这样做，但这导致使用on值覆盖整个对象：

// update the filter array of the object with id == activeId
let updatedFilterGroupsData = filterGroupsData.map(filterGroupData => filterGroupData.id === activeId ? filterGroupData.filters.push('test') : filterGroupData)

this.setState({filterGroupsData: updatedFilterGroupsData});

感谢任何帮助。

Answer 1

此处：filterGroupData.filters = 'test'

您将prop值设置为字符串，而不是放入数组中。

您需要将push项放入filters数组中，例如：

filterGroupData.filters.push('test');

Answer 2

filters是一个数组，因此您需要将push('test')与map中的多行代码一起使用：

var filterGroupsData = [
    {"key":1532957059388,"id":1532957059388,"filters":[]},        
    {"key":1532957059612,"id":1532957059612,"filters":[]},        
    {"key":1532957059847,"id":1532957059847,"filters":[]}
]
var activeId = 1532957059612;
let updatedFilterGroupsData = filterGroupsData.map((filterGroupData) => {
  if(filterGroupData.id === activeId) {
      filterGroupData.filters.push('test');
  }
  return filterGroupData 
});
console.log(updatedFilterGroupsData);

Answer 3

您可以使用findIndex获取要更新的过滤器组的索引，然后创建对象和filters数组的副本，并为其添加新条目。

示例

const id = 1532957059388;

this.setState(previousState => {
  const filterGroupsData = [...previousState.filterGroupsData];
  const index = filterGroupsData.findIndex(group => group.id === id);

  filterGroupsData[index] = {
    ...filterGroupsData[index],
    filters: [...filterGroupsData[index].filters, "new filter"]
  };

  return { filterGroupsData };
});

如何更新作为数组的对象属性？

3 个答案: