javascript - 通过检查对象值将嵌套数组对象移动到另一个嵌套数组
问题描述
我正在解决一个问题,其中我使用对象嵌套了数组,我需要检查myData.consumedParts数组中的部分或所有对象是否以值为 true 的方式使用。
const myData = [
{
name: "sample data 1",
code: "450W0619P001",
consumedParts: [
{ serial: "arr 1 - part 1", consumed: true },
{ serial: "arr 1 - part 2", consumed: false },
],
},
{
name: "sample data 2",
code: "450W0619P001",
consumedParts: [
{ serial: "arr 2 - part 1", consumed: true },
{ serial: "arr 2 - part 2", consumed: true },
],
},
];
const [parts, setParts] = useState(myData);
然后我需要将消耗的对象保存在另一种状态。我正在尝试使用以下功能,它成功删除了消耗的物品,但没有将它们保存为新状态[consumedParts, setConsumedParts]:
const [consumedParts, setConsumedParts] = useState([]);
const markConsumed = (index) => {
const newParts = [...parts];
const SelectedParts = newParts[index].reserved;
const newDelTodo = consumedParts.slice();
for (let i = SelectedParts.length - 1; i >= 0; --i) {
if (SelectedParts[i].selected == true) {
SelectedParts.splice(i, 1);
newDelTodo.push(SelectedParts[i]);
}
}
setConsumedParts(newDelTodo);
setParts(newParts);
};
请参阅并让我知道如何使此代码正常工作。谢谢
解决方案
您可以使用 遍历您的数据array#map
并使用 过滤consumedParts
状态array#filter
。
const myData = [ { name: "sample data 1", code: "450W0619P001", consumedParts: [ { serial: "arr 1 - part 1", consumed: true }, { serial: "arr 1 - part 2", consumed: false }, ], }, { name: "sample data 2", code: "450W0619P001", consumedParts: [ { serial: "arr 2 - part 1", consumed: true }, { serial: "arr 2 - part 2", consumed: true }, ], }, ],
getConsumedParts = (status) => myData.map(o => {
return {
...o,
consumedParts: o.consumedParts.filter(o => o.consumed === status)
}
});
console.log(getConsumedParts(true));
console.log(getConsumedParts(false));
.as-console-wrapper { max-height: 100% !important; top: 0; }
推荐阅读
- ios - 在 iOS 14 上使用通用链接
- reporting-services - 如何创建将数据库名称显示为下拉过滤器的 ssrs 报告,用户可以动态选择数据库并运行报告
- reactjs - 使用 nextJs API 链接创建支付意图后,在 ConfirmCardPayment 上出现条带支付意图错误
- java - 如何在同一个 eclipse src 文件夹中复制和粘贴 eclipse 包
- django - Django Admin Inlines 错误“MultipleObjectsReturned at”
- android - 如何检查/检测用户在发出 API 请求时是否使用代理?
- c - C 编程语言:项目错误 - *** `./myText' 中的错误:free():无效指针:0xbffebb58 ***
- azure - 为每个环境创建 Azure 仪表板
- google-cloud-platform - 如何检查计算引擎 vm 是否以最大核心/持续涡轮频率运行?
- javascript - 通过 docker compose 将 envs 传递给 db