从状态对象数组中删除对象元素（React.js）

Question

我试图从数组中删除一个对象，但它总是删除最后一个对象。

const removeDuplicateHandler = (id) => {
    setCopyActions((copyActions) =>
      copyActions.filter((action) => action.id !== id)
    );
};

这就是我正在经历的循环

{copyActions.map((actionType, idx) => (
        <TargetInputBox
          key={idx}
          isDuplicate={true}
          actionName={actionType.label}
          contactPersons={store.allContactPersons}
          buttonAttrValue={actionType.value}
          duplicateAddHandler={() =>
            addDuplicateHandler(actionType.value, actionType.label)
          }
          duplicateRemoveHandler={() =>
            removeDuplicateHandler(actionType.id)
          }
        />
))}

Answer 1

for 循环是一种更好、更有效的方法：

const duplicate = [...copyActions]
for (let i = 0; i < copyActions.length; i++) {
    if (copyActions[i].id === id) {
        duplicate.splice(i, 1)
    }
    if (i + 1 === copyActions.length) {
        setCopyActions(duplicate)
    }
}

创建数组的副本并循环遍历它。如果程序找到与 id 相同的 ID，它将从数组中删除该索引。循环完成后，它将把状态设置为更改后的数组。