Reactjs 过滤可用时间和天数

我正在创建会议日程应用程序

我有一个数组，可以容纳创建会议所需的所有时间：

export const getHours = () => {
const hoursArray = [];
let hourOnAnHour = 8;
let hours = 8;
for (let i = 0; i < 11; i++) {
 hours++;

 hourOnAnHour++;
 hoursArray.push({
     key: hourOnAnHour,
     hourTitle:
         hourOnAnHour > 9 ? `${hourOnAnHour}:00` : 
 `0${hourOnAnHour}:00`,
     value: hours,
   });
   }
  console.log(hoursArray);
  return hoursArray;
  };

---

我想做什么： 我只想显示可用的日期和时间，还没有完成

---

我有一个显示天数数组的组件。 和一系列的小时数。 此时，应用程序将显示所有小时和天数数组。 在这个组件中，您可以看到days数组、hours数组和获取周会议的函数

 const DatesList = () => {
 const { state, getWeekMeetings } = useContext(BookingContext);

 const loading = state.loading;
 const [week, setWeek] = useState([]);
 const [hours, setHours] = useState([]);

useEffect(() => {
 getWeekMeetings();//////////get the week meetings objects///
 setWeek(getWeekDays());///days array that i made in p2
 setHours(getHours());///hours array that i made in p1
 }, []);

 const getFilteredHours = () => {////////HERE MY PROBLEM START...
 console.log(state.meetings);
 };
 console.log(state.meetings);
  return (
 <>
     {loading ? (
         <LoadingSpinner />
     ) : (
         <View style={styles.categoryview}>
             <ListButton data={week} />
             <ListButton data={hours} />
         </View>
     )}
     </>

const DatesList=（）=>{
const{state，getWeekMeetings}=useContext（BookingContext）；
常量加载=状态加载；
const[week，setWeek]=useState（[]）；
const[hours，setHours]=useState（[]）；
useffect（（）=>{
getWeekMeetings（）；//获取周会议对象///
setWeek（getWeekDays（））；///我在p2中创建的days数组
setHours（getHours（））；///我在p1中创建的小时数组
}, []);
const getFilteredHours=（）=>{///我的问题从这里开始。。。
控制台日志（状态会议）；
};
控制台日志（状态会议）；
返回(
{加载(
) : (
)}

问题：如何过滤阵列以仅显示可用小时/天，或以其他颜色显示不可用小时/天

 Object {
 "_id": "5facf01a2d367e56ec29a999",
 "date": "2020-11-18T22:00:00.000Z",
 "determinedBy": Object {
 "_id": "5fac1f65a9e40443ccdf274b",
 "name": "a",
 },
 "hour": "16",
 "massageType": "18",
 },
 Object {
 "_id": "5facf0222d367e56ec29a99a",
 "date": "2020-11-19T22:00:00.000Z",
 "determinedBy": Object {
 "_id": "5fac1f65a9e40443ccdf274b",
 "name": "a",
  },
   "hour": "16",
  "massageType": "19",
  },
   Object {
    "_id": "5facf02c2d367e56ec29a99b",
  "date": "2020-11-20T22:00:00.000Z",
  "determinedBy": Object {
   "_id": "5fac1f65a9e40443ccdf274b",
   "name": "a",
  },
  "hour": "16",
  "massageType": "20",
  },

 const DatesList = () => {
 const { state, getWeekMeetings } = useContext(BookingContext);

 const loading = state.loading;
 const [week, setWeek] = useState([]);
 const [hours, setHours] = useState([]);

useEffect(() => {
 getWeekMeetings();//////////get the week meetings objects///
 setWeek(getWeekDays());///days array that i made in p2
 setHours(getHours());///hours array that i made in p1
 }, []);

 const getFilteredHours = () => {////////HERE MY PROBLEM START...
 console.log(state.meetings);
 };
 console.log(state.meetings);
  return (
 <>
     {loading ? (
         <LoadingSpinner />
     ) : (
         <View style={styles.categoryview}>
             <ListButton data={week} />
             <ListButton data={hours} />
         </View>
     )}
     </>