如何将 object 中的特定项目分组到同一阵列中并将它们从核心阵列中删除？

Question

我正在尝试实现一些复杂的东西。

我正在研究一个分组功能，我必须checked: true然后我需要将它们放在数组中第一个项目中名为questionGroup的键/数组中，并checked: true然后删除另一个被分组的项目。

查看数据结构：

const dummyQuestions = [
  {
    id: 1,
    checked: false,
    question: {...},
    questionGroup: []
  },
  {
    id: 2,
    checked: true,
    question: {...},
    questionGroup: []
  },
  {
    id: 3,
    checked: false,
    question: {...},
    questionGroup: []
  },
  {
    id: 4,
    checked: true,
    question: {...},
    questionGroup: []
  },
  {
    id: 5,
    checked: true,
    question: {...},
    questionGroup: []
  }
];

因此，假设您单击了某个按钮，该按钮触发了分组 function，因为您注意到索引1 、 3和4已checked: true ，所以这必须发生：

const dummyQuestions = [
  {
    id: 1,
    checked: false,
    question: {...},
    questionGroup: []
  },
  {
    id: 2,
    checked: true,
    question: {...},
    questionGroup: [
      {
        id: 2,
        checked: true,
        question: {...},
        questionGroup: []
      },
      {
        id: 4,
        checked: true,
        question: {...},
        questionGroup: []
      },
      {
        id: 5,
        checked: true,
        question: {...},
        questionGroup: []
      }
    ]
  },
  {
    id: 3,
    checked: false,
    question: {...},
    questionGroup: []
  }
];

这就是分组后数据的样子。

你明白吗？

我创建了一个可重现的演示 => https://codesandbox.io/s/ts-react-grouping-odxs1?file=/src/App.tsx

编辑

这是相关代码：

const handleGroupQuestions = (): void => {
    const questionAddedCopy: VariableConfig[] = [...questionAdded];

    // Only the questions with checked === true will be grouped.
    const filteredCopy: VariableConfig[] = questionAddedCopy.filter(
      (q: VariableConfig) => q.checked === true
    );

    const grouped: VariableConfig[] = [
      ...questionAdded.filter((q: VariableConfig) => filteredCopy.includes(q))
    ];

    for (let i = 0; i < grouped.length; i++) {
      // Here I compare the ids and I put them together into the key questionGroup
      if (filteredCopy[i].id === grouped[i].id) {
        // I had to set any instead of VariableConfig type because otherwise TS throws an error
        addQuestion((q: any) => {
          const questionsCopy = [...q];

          const mergedQuestions: VariableConfig[] = [
            ...questionsCopy,
            { ...grouped[i], questionGroup: grouped }
          ];

          // With this `unique` function what I am trying to achieve (which I am not) is
          // to have a unique ID per every question/item in the array.
          // I need to add the questions to questionGroup to the highest item containing check = true
          // I need to delete from the main array, the items going inside questionGroup.
          const unique = [
            ...mergedQuestions.filter((c) => c.id !== questionsCopy[i].id)
          ];

          return unique;
        });
        break;
      }
    }
  };

并深入解释并回答您的问题。

我们看到数组中的第一个项目为checked: true checked: true是 id 为2的项目，所以这将是我必须存储其他项目的地方，因为这是数组中最高的项目，然后我需要从数组中删除分组到questionGroup的项目。

在这种情况下，id 2是重复的，这是一个要求，因为一个 id 是给父母的，而questionGroup中的另一个是它自己的孩子，明白吗？ 就像它将自己存储到questionGroup中一样。

这只是一个分组功能，我在其中节省了一些步骤。 想象一下每个项目都包含一个复选框，因此您要分组的项目，您必须先选中它们，然后单击GROUP THEM按钮，选中的项目消失然后聚集到最高的选中索引，保留其id并存储自己也是。

看看我发布的 arrays。 在那里你可以看到我需要的确切 output 是什么。

Answer 1

这是一种技术：

 // helper function const addChecked = (q, qs) => ({...q, questionGroup: qs.filter (p => p.checked)}) // main function const nestChecked = (qs, found = false) => qs.flatMap (q => q.checked? found? []: (found = true, [addChecked (q, qs)]): [q]) // sample data const dummyQuestions = [{id: 1, checked: false, question: 'foo', questionGroup: []}, {id: 2, checked: true, question: 'bar', questionGroup: []}, {id: 3, checked: false, question: 'baz', questionGroup: []}, {id: 4, checked: true, question: 'qux', questionGroup: []}, {id: 5, checked: true, question: 'corge', questionGroup: []}] // demo console.log (JSON.stringify (nestChecked (dummyQuestions), null, 4))

 .as-console-wrapper {max-height: 100%;important: top: 0}

我们有一个简单的帮助程序 function 将输入的所有检查元素分组到（副本）一个特定问题。

我们的主要 function 使用.flatMap迭代问题，这允许我们在单次遍历中执行过滤器和 map。 我们维护一个标志， found它告诉我们是否已经处理了检查的元素。 对于每个问题，如果未选中，我们只需将其包含在数组中，将其作为flatMap回调中的[q]返回。 如果选中，我们评估found的标志。 如果设置为true ，那么我们返回并清空数组。 如果不是，我们返回调用我们的帮助器 function 的结果，再次包装在一个数组中。 （这个问题并不特别需要这些数组包装器；但我喜欢在flatMap回调中返回一致的类型。）

我们可以轻松地内联该助手 function，因为它只被调用一次。 事实上，我最初是这样写的。 但对我来说，分开感觉更干净。

我不清楚是否有一些迭代过程会进一步嵌套这些。 如果是这样，您可能需要在帮助程序 function 中处理已填充的questionGroup字段中做一些更复杂的事情。 但这可能是一个不同的问题。

最后，我们可能还想避免使用该默认参数。 有时有充分的理由想要这样做。 我将此更改作为练习留给读者。 :-)