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

时间:2021-06-23 18:20:44

标签: javascript reactjs multidimensional-array

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

  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: [],
    },
  ];

1 个答案:

答案 0 :(得分:0)

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

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)

相关问题