在react中将对象从嵌套数组移动到另一个数组



单击按钮时,我需要将所有选定的对象从一个嵌套数组移动到另一个。我的数据结构是:

const Data = [
{
name: "Steel Support, Aviation Lights, Std", // match parent array name
code: "450W0619P001",
reserved: [
{ serial: "one", selected: true }, // move all selected: true items to consumed array
{ serial: "two", selected: true },
],
consumed: [],
},
{
name: "Lock Nut, Prevailing Torque, M12x1.75m", // match parent array name
code: "450W0619P001",
reserved: [
{ serial: "one", selected: true },
{ serial: "two", selected: true },
{ serial: "three", selected: false },
],
consumed: [],
},
];
const [erpParts, setErpParts] = useState(Data);

为了实现这一点,我编写了以下函数:

const markConsumed = (parentArr) => {
setErpParts((erpParts) =>
erpParts.map((x) => {
if (x.name !== parentArr.name) return x;
else {
const consumedUpdated = x.consumed;
const reservedUpdated = x.reserved.map((res) => {
if (res.selected == true) {
return consumedUpdated.push(res), x.reserved.splice(res, 1);
}
});
return { ...x, reserved: reservedUpdated, consumed: consumedUpdated };
}
})
);
};

不幸的是,我的函数没有返回所需的结果。这就是我调用函数的方式:

<Button onPress={()=> markConsumed(activePart)}>MARK CONSUMED</Button>

请对此进行调查,并让我知道我职能中的问题。在预期的结果中,我需要将所有选定的部分从保留阵列移动到消耗阵列,如下所示:

const Data = [
{
name: "Steel Support, Aviation Lights, Std", // match parent array name
code: "450W0619P001",
reserved: [],
consumed: [
{ serial: "one", selected: true }, // parent array name matched and moved selected items from reserved to consumed array
{ serial: "two", selected: true },
],
},
{
name: "Lock Nut, Prevailing Torque, M12x1.75m",
code: "450W0619P001",
reserved: [
{ serial: "one", selected: true },
{ serial: "two", selected: true },
{ serial: "three", selected: false },
],
consumed: [],
},
];

使用一个基本循环,并推动思考它应该属于哪里。

const Data = [{ name: "Steel Support, Aviation Lights, Std", code: "450W0619P001", reserved: [{ serial: "one", selected: true }, { serial: "two", selected: true },], consumed: [], }, { name: "Lock Nut, Prevailing Torque, M12x1.75m", code: "450W0619P001", reserved: [{ serial: "one", selected: true }, { serial: "two", selected: true }, { serial: "three", selected: false },], consumed: [], },];
function markConsumedAndUpdate(filterName) {
return Data.map(item => {
if (item.name != filterName) return item
let reserved = []
for (const elem of item.reserved)
if (!elem.selected)
reserved.push(elem)
else
item.consumed.push(elem);
item.reserved = reserved;
return item
});
}
markConsumedAndUpdate("Steel Support, Aviation Lights, Std")
markConsumedAndUpdate("Lock Nut, Prevailing Torque, M12x1.75m")
console.log(Data)

最新更新