Question

通过数组的数组进行映射，查找 id 并更改对象

2022-05-25

1790

javascript arrays reactjs

我有一个 id 数组 ['id1', 'id3'] 。

我还有一个 items 数组：

[
      {
        children: [{
                  children: [{
                            id: "id1", //This is value I need to find
                            status: { state: false}, //this is value I need to change
                            }],
                  }],
      },
      {
        children: [{
                  children: [{
                            id: "id2", 
                            status: { state: false}, 
                            }],
                  }],
      },
      {
        children: [{
                  children: [{
                            id: "id3", 
                            status: { state: false}, 
                            }],
                  }],
      },
    ]

我的目标是根据 id 从第一个数组中找到每个 item ，并更改属性 state ，然后返回所有 items ，包括那些我已更改的。

这是我的尝试，但它再次返回所有项目，而且我不确定如何更改属性。

items.filter(item =>
  item.children.map(child =>
     child.children.map(object =>
        idsArray.map(id => id === object.id)
)))

Answer 1

我认为您可以使用类似下面的递归函数：

let ids = ["id1", "id2"];
let arrayOfItems = [
  {
    children: [
      {
        children: [
          {
            id: "id1",
            status: {
              state: false
            }
          }
        ]
      }
    ]
  },
  {
    children: [
      {
        children: [
          {
            id: "id2",
            status: {
              state: false
            }
          }
        ]
      }
    ]
  },
  {
    children: [
      {
        children: [
          {
            id: "id3",
            status: {
              state: false
            }
          }
        ]
      }
    ]
  }
];

function changeStatus(arrayOfItems, ids) {
  return arrayOfItems.map((e) => {
    if (e.id && ids.includes(e.id)) {
      return { ...e, status: { state: true } };
    } else if (e.children) {
      return { ...e, children: changeStatus(e.children, ids) };
    } else {
      return { ...e };
    }
  });
}

console.log(changeStatus(arrayOfItems,ids));