Question

在React中，我有两个保存这样的多维数据的状态对象：

this.state = {
    itemList: [
        {Id: 1, Name: "Bob", Age: 50},
        {Id: 2, Name: "Fred", Age: 26},
        {Id: 3, Name: "Joe", Age: 34},
    ],
    newItemList: [],
}

我想调用一个函数，使用项目的ID将项目从第一个列表添加到第二个列表。例如：

addItem(1);
addItem(2);
//NEW VALUES:
itemList: [
    {Id: 1, Name: "Bob", Age: 50},
    {Id: 2, Name: "Fred", Age: 26},
    {Id: 3, Name: "Joe", Age: 34},
],
newItemList: [
    {Id: 1, Name: "Bob", Age: 50},
    {Id: 2, Name: "Fred", Age: 26},
],

然后，我想调用第二个函数来搜索第二个列表newItemList，以查看它是否包含ID所包含的对象。如果它确实包含该ID，我想删除整个对象。示例：

checkItem(2);
function checkItem(item) {
    if(isInNewList(item)) {
        //Function checks for item 2 and removes item 2 from list
    }
}
//NEW VALUE:
newItemList: [
    {Id: 1, Name: "Bob", Age: 50},
],

我已经读了很多书，但是似乎无法掌握使这两种方法容易实现的概念。 itemList和newItemList都存储在当前组件的状态中。谢谢您的帮助！

Answer 1

使用findIndex检查数组是否包含元素，如果包含元素，则使用过滤器函数创建一个新数组，该数组不包含具有所需ID的对象

let itemList = [{
    Id: 1,
    Name: "Bob",
    Age: 50
  },
  {
    Id: 2,
    Name: "Fred",
    Age: 26
  },
  {
    Id: 3,
    Name: "Joe",
    Age: 34
  },
]
let newItemList = [{
    Id: 1,
    Name: "Bob",
    Age: 50
  },
  {
    Id: 2,
    Name: "Fred",
    Age: 26
  },
]


function searchByIndex(id) {

  let getIndex = newItemList.findIndex(item => id === item.Id);

  if (getIndex !== -1) {
    newItemList = newItemList.filter(item => item.Id !== id)
  }
}
searchByIndex(2);
console.log(newItemList)

Answer 2

我认为一个非常干净的解决方案是仅使用商品ID进行这些操作

const itemIds = [
        {Id: 1, Name: "Bob", Age: 50},
        {Id: 2, Name: "Fred", Age: 26},
        {Id: 3, Name: "Joe", Age: 34},
    ].map(item => item.id)

this.state = {
    itemIds,
    newItemIds: [],
}

const addItem = id => this.setState(
  state => ({ newItemIds: state.newItemIds.concat(id) })
)

const removeIfPresent = idToRemove => this.setState({ 
   state => ({ newItemsIds: state.newItems.filter(id => id !== idToRemove) })
)

从一个对象到另一个对象反应复制项目，并查看对象是否处于当前状态

2 个答案: