reactJs 中的 Javascirpt 数组排序问题

Question

我正在尝试在我的反应项目中使用材质 UI 创建手风琴。 我面临的挑战是我需要分离 pageNumber 相同的数据。 就像下面是我的数组

let myArr=[{string:"Text One",pageNumber:1},{string:"Text Two",pageNumber:1},{string:"Text Three",pageNumber:2},{string:"Text Four",pageNumber:3},]

因此，当我循环我的数组时，如果我发现多个相同的 pageNumber，我将不会创建新的手风琴。 就像我将为第 1 页和第 2 页和第 3 页制作一个手风琴一样。

pageNumber 1 将包含手风琴正文中的所有字符串。 我如何在 React JSX 模板中像这样循环？ 谢谢

Answer 1

为了使其工作，您可以首先通过创建 pageNumber => array(string) 的 map 来重新处理数组，这样您就可以根据页码循环遍历它。 可能的解决方案如下：

    let myArr=[{string:"Text One",pageNumber:1},{string:"Text Two",pageNumber:1},{string:"Text Three",pageNumber:2},{string:"Text Four",pageNumber:3},];
    let allAccordions = [];

    let mapped = {};
    myArr.forEach(({string, pageNumber}) => {
        if (!Array.isArray(mapped[pageNumber])) {
            mapped[pageNumber] = [];
        }
        mapped[pageNumber].push(string);
    });

    console.log(mapped); // {1:['Text One', 'Text Two'], 2: ['Text Three'...]}

    Object.keys(mapped).forEach(key => { // key = 1,2,3,4
        let strings = mapped[key]; // strings = ['Text One', 'Text Two']
        
        // create accorion content
        let accordionContent = strings.map(string => {
            return `<div class="accordion-content">${string}</div>`;
        });

        // make main accordion
        let accordion = `<div class="accodrion">${accordionContent}</div>`;
        
        // add to accordions
        allAccordions.push(accordion)
    });

    console.log(allAccordions);

您现在可以将 react jsx 组件中的 allAccordions 打印为 ${allAccordions}。