Блог

Как сказано в заголовке, мне нужно заполнить отмеченные даты, которые я получаю из API в компоненте календаря (я использую «react-native-calendars»: «^ 1.403.0»).

 enter code here : <Calendar
    markedDates={{
       "2020-09-15": { selected: true, marked: true, selectedColor: "blue" },
       "2020-09-05": { selected: true, marked: true, selectedColor: "blue" },
       }}/>
  

Это работает нормально, но моя проблема в том, как динамически отмечать дни из API. вот мой код

const calendar возвращается при входе в систему

 Array [
   Object {
    "course_id": 1,
    "created_at": "2020-09-08T12:52:05.000000Z",
    "date": "2020-09-25",
    "description": "Amet quas nemo aliquid cupiditate libero deserunt et excepturi.",
    "group_id": 1,
    "homework": "Illo eveniet est et non molestiae ut ab atque.",
     "id": 571,
    "time_duration": 89,
    "time_start": "14:49:37",
    "title": "Ms.",
    "updated_at": "2020-09-08T12:52:05.000000Z",
   },
  Object {
    "course_id": 1,
     "created_at": "2020-09-08T12:52:09.000000Z",
     "date": "2020-09-30",
    "description": "Earum similique molestiae sunt praesentium et ea iste deserunt.",
    "group_id": 1,
    "homework": "Autem aspernatur beatae in rerum rerum sit harum quis.",
    "id": 831,
     "time_duration": 89,
    "time_start": "21:53:01",
    "title": "Prof.",
    "updated_at": "2020-09-08T12:52:09.000000Z",
   },
 ]
  

вот весь код:

   const CalendarScreen = (props) => {
  const dispatch = useDispatch();
  const access_token = useSelector((state) => state.auth.token);
  const calendar = useSelector((state) => state.calendarClasses.calendar);
  const isCalendarLoading = useSelector(
    (state) => state.calendarClasses.isCalendarLoading
  );

  const obj = Object.fromEntries(calendar.map((item) => ["date", item.date]));

  let day= JSON.stringify(obj.date);

  useEffect(() => {
    dispatch(loadCalendar());
    dispatch(getCalendar(access_token, childId));
  }, [dispatch, getCalendar]);


  return (
      <Calendar
        markedDates={{
          day: { selected: true, marked: true, selectedColor: "blue" },
      
        }}
/>
  

Каждое предложение будет приятным. Спасибо

Решение:

  const CalendarScreen = (props) => {
  const dispatch = useDispatch();
  const access_token = useSelector((state) => state.auth.token);
  const calendar = useSelector((state) => state.calendarClasses.calendar);
  const isCalendarLoading = useSelector(
    (state) => state.calendarClasses.isCalendarLoading
  );

  useEffect(() => {
    dispatch(loadCalendar());
    dispatch(getCalendar(access_token, childId));
  }, [dispatch, getCalendar]);

  let markedDay = {};

  calendar.map((item) => {
    markedDay[item.date] = {
      selected: true,
      marked: true,
      selectedColor: "purple",
    };
  });


  return (
      <Calendar markedDates={ markedDay }
        ...
    />
}
  

Обратите внимание, что в компоненте Calendar — markedDates = { } , отмеченные даты должны быть с одним {}, потому что markedDay является объектом. Таким образом, вы не можете установить, как в документации <Calendar markedDatse={{ markedDay }} /> потому что это будет похоже на markedDates= {{{ }}} .

Вам не хватает только нескольких квадратных скобок вокруг даты:

 markedDates={{
  [day]: { selected: true, marked: true, selectedColor: "blue" },
}}