0

我正在开发一个 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 && storedMonth === selectedMonth ) {

            if(count >= startTime && 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)} />&nbsp;{times[j]} &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)} />&nbsp;{times[j]} &nbsp;</label>
                </>
              );
        }
        } return <div >{rows}</div>;
       
    }

所以输出显示两次，因为数据库中有两个像这样的插槽

在此处输入图像描述

我应该更新数组吗？最好的方法是什么？我正在使用反应钩子。

我会很感激你的帮助！

谢谢。

4

0 回答 0