如何在嵌套的对象数组Javascript中切换布尔值答案

【问题标题】：How to toggle Boolean Value in nested Array of Objects Javascript如何在嵌套的对象数组Javascript中切换布尔值
【发布时间】：2021-07-13 09:42:17
【问题描述】：

我正在尝试处理 SectionList 数据，并且我想在单击相应项目时更改值。这是数据示例

const Person = [
    {
        firstname: "john",
        lastname: "doe",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
        {
        firstname: "jane",
        lastname: "doe",
        items: [
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
    {
        firstname: "john",
        lastname: "adam",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
]

让我们讨论它的第一个对象。如果我按下它在设计部分中的 items[0] 上，可见值应该是 false，我按下 item[1] 现在可见，这应该是 true，并且 item[0]' s visible 应该是假的，如果我移动到其他索引对象，那么应该会发生同样的事情，但之前更改的值应该保留在那里。谢谢。这是我到目前为止所做的代码

    let arr = Person?.map((elem) => {
         
          return {
            ...elem,
           
            items: elem?.items?.map(i => {
              if (i.id == item.id) {
                i.visible=false
                return {
                  ...i,
                  visible: !i.visible,
                };
              }
              return i;
            }),
          };
        });

【问题讨论】：

切换发生在同一个人的物品上，是吗？
我想在 item 的每个对象中设置最大一个 true。但是如果我切换其他索引值，则在重置之前完成切换的其余部分
从哪里得到表达式if (i.id == item.id) 的item.id。此外，您的 Person 数据中也没有 i.id。

标签： javascript node.js arrays react-native

【解决方案1】：

这可能会对你有所帮助。

toggle = (parentItemID, childItemID) => {
  yourArray.map((elem) => {
   if (elem.id === parentItemID) {
    return {
     ...elem,
     item: item.map((item) => {
      item.visible = false
      if (item.id === childItemID) {
      
       return {
        ...item,
        visible: !item.visible,
       };
      }
      return item;
     }),
    };
   }
   return elem;
  });
 };

【讨论】：