Блог

Я разрабатываю приложение MERN, в котором у меня есть участники с их временем и датой, временной интервал представляет собой массив, который может содержать более одного слота для одного сотрудника или участника, поэтому всякий раз, когда пользователь нажимает на средство выбора даты после нажатия на определенный персонал, пользователь должен получить временной интервал этогослот в зависимости от того, что находится в их слоте, проблема, с которой я сталкиваюсь, заключается в том, что если у персонала, например, более одного занятого слота (два слота), который становится массивом объектов, временной интервал отображается дважды, и каждый из них обновляется отдельно в зависимости от данных. Вот код:

Итак, сначала я получаю данные из массива и передаю их функции:

 {members.timeSlot.map((slot, is) =>
    <div key={is} >
       {counter(slot.slot_date ,slot.slot_start_time, slot.slot_end_time)}
    </div>
)}

 

Функция над ним:

  let counter = (storedDate, startTime, endTime) => {

        var times = ['09:00 AM', '10:00 AM', '11:00 AM', '12:00 PM','01:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM', '06:00 PM'];
        var rows = [];
      

           var sDate = new Date(storedDate); 
           let storedDay = sDate.getDate();
           let storedMonth = (sDate.getMonth()   1 );
           let storedYear = sDate.getFullYear();

           let selectedDate = date  
           let selectedDay = selectedDate.getDate(); // 11
           let selectedMonth = (selectedDate.getMonth()   1);
           let selectedYear =  selectedDate.getFullYear();
        
        for (var j = 0; j < times.length; j  ) {
            let count = j   9;
            if(storedDay === selectedDay amp;amp; storedMonth === selectedMonth ) {

            if(count >= startTime amp;amp; count <= endTime ) {
                 continue;
            } else {
                rows.push(
                    <>
                         <label style={{backgroundColor:'pink', color:'blue'}}><input type="radio" value={count} key={j} style={{position:'relative'}} name="schedule-weekly-option" onClick={()=> setTimes(count)} />amp;nbsp;{times[j]} amp;nbsp;</label>
                    </>
                  );
               }
        } else  {
                rows.push(
                <>
                     <label style={{backgroundColor:'blue', color:'pink'}} ><input type="radio" value={count} key={j} style={{position:'relative'}} name="schedule-weekly-option" onClick={()=> setTimes(count)} />amp;nbsp;{times[j]} amp;nbsp;</label>
                </>
              );
        }
        } return <div >{rows}</div>;
       
    }
 

таким образом, вывод отображается дважды, потому что в базе данных есть два слота, подобных этому

Должен ли я обновить массив? и какой лучший способ это сделать? Я использую реагирующие хуки.

Я был бы признателен за вашу помощь!

Спасибо.