Блог

Главная - Вопросы по программированию - Проблема сортировки массива Javascirpt в ReactJS

Проблема сортировки массива Javascirpt в ReactJS

#javascript #arrays #reactjs

Вопрос:

Я пытаюсь создать аккордеон, используя пользовательский интерфейс material в своем проекте react. Проблемы, с которыми я столкнулся, заключаются в том, что мне нужно разделить данные там, где номер страницы одинаков. Например, вот мой массив ниже

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

Поэтому, когда я буду зацикливать свой массив, я не буду создавать новый аккордеон, если найду несколько одинаковых номеров страниц. Например, я сделаю один аккордеон для номера страницы 1 и Новый для номера страницы 2 и номера страницы 3.

Номер страницы 1 будет содержать всю строку в теле аккордеона. как я могу сделать такой цикл в шаблоне react JSX ? Спасибо

Комментарии:

1. Это похоже на проблему JS, чем реагировать. Можете ли вы показать какой-либо код, который вы, возможно, пробовали?

2. Я просто попытался разобраться в них, но потерпел неудачу, вот мой код, ` для(пусть i=0; я

Ответ №1:

Чтобы заставить его работать, вы можете сначала переработать массив, создав карту PageNumber => массив(строка), таким образом, вы можете просмотреть его в зависимости от номера страницы. Возможным решением может быть следующее:

     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 как ${Все записи}.

Метки: