更新数组中的对象，在对象中使用preState和useState钩子

Question

我想根据id等于传递的属性删除嵌套对象。此时，将替换整个对象。当我尝试使用useState更新状态时，我遗漏了一些东西，可能是我循环对象的方式？

更新：问题已关闭，以响应更新嵌套对象的可用答案。这个问题涉及阵列，我认为这是当前问题的一部分。请注意此问题与forEach的性质差异。可能需要使用return语句，或者使用不同的方法对id进行过滤。。

我的初始对象看起来像这样：

{
  "some_id1": [
    {
      "id": 93979,
      // MORE STUFF
   
    },
    {
      "id": 93978,
      // MORE STUFF
    }
  ],
  "some_id2": [
    {
      "id": 93961,
      // MORE STUFF
    },
    {
      "id": 93960,
      // MORE STUFF
    }
  ]
}

我这样浏览每一项：

for (const key in items) {
        if (Object.hasOwnProperty.call(items, key)) {
            const element = items[key];
            element.forEach(x => {
                if (x.id === singleItem.id) {
                    setItems(prevState => ({
                        ...prevState,
                        [key]: {
                            ...prevState[key],
                            [x.id]: undefined
                        }
                    }))
                }
            })
        }

Answer 1

for (const key in items) {
    if (Object.hasOwnProperty.call(items, key)) {
        const element = items[key];
        element.forEach(x => {
            if (x.id === singleItem.id) {
                setItems(prevState => ({
                    ...prevState,
                    //filter will remove the x item
                    [key]: element.filter(i => i.id !== x.id),
                }))
            }
        })
    }
}

for(const k in items) items[k] = items[k].filter(x => x.id !== singleItemId);

const items = {
  "some_id1": [
    {
      "id": 93979,   
    },
    {
      "id": 93978,
    }
  ],
  "some_id2": [
    {
      "id": 93961,
    },
    {
      "id": 93960,
    }
  ]
}

const singleItemId = 93979;
for (const k in items) items[k] = items[k].filter(x => x.id !== singleItemId);

console.log(items);
//setItems(items)

Answer 2

可能一个简单的减少函数会起作用，循环遍历条目并返回一个对象

const data = {"some_id1": [{"id": 93979},{"id": 93978}],"some_id2": [{"id": 93961},{"id": 93960}]}
const remove = ({id, data}) => {
  return Object.entries(data).reduce((prev, [nextKey, nextValue]) => {
    return {...prev, [nextKey]: nextValue.filter(({id: itemId}) => id !==  itemId)}
  
  }, {})

}

console.log(remove({id: 93961, data}))

Answer 3

您的代码中有3个问题：

1. 您正在将key的值设置为一个对象，而项则需要一个id数组。

// current
[key]: {
 ...prevState[key],
 [x.id]: undefined
}

// expected
[key]: prevState[key].filter(item => item.id === matchingId)

const a = { xyz: 123, xyz: undefined };
console.log(a); // { xyz: undefined} - it did not remove the key

为了使代码更具可读性，需要操作整个对象items，然后使用setItems，将其设置为一次状态，而不是在循环内根据某些条件多次调用setItems。

这使您的代码更加可预测，并导致更少的重新渲染。

此外，您的问题的解决方案：

// Define this somewhere
const INITIAL_STATE = {
  "some_id1": [
    {
      "id": 93979
    },
    {
      "id": 93978
    }
  ],
  "some_id2": [
    {
      "id": 93961
    },
    {
      "id": 93960
    }
  ]
};

// State initialization
const [items, setItems] = React.useState(INITIAL_STATE);

// Handler to remove the nested object with matching `id`
const removeByNestedId = (id, items) => {
  const keys = Object.keys(items);
  const updatedItems = keys.reduce((result, key) => {
    const values = items[key];
    // Since, we want to remove the object with matching id, we filter out the ones for which the id did not match. This way, the new values will not include the object with id as `id` argument passed.
    result[key] = values.filter(nestedItem => nestedItem.id !== id)
    return result;
  }, {});
  setItems(updatedItems);
}

// Usage
removeByNestedId(93961, items);