В календаре Antd не отображается выбранный месяц при изменении состояния

Question

Компонент календаря Antd не отображает выбранный месяц, когда я выбираю его из раскрывающегося списка с первой попытки. Обратите внимание, что моя ловушка useEffect зависит от изменения месяца (установленного onPaneChange). Когда я меняю месяц, ловушка срабатывает, извлекает данные из бэкэнда и переводит их в состояние. Однако предыдущий месяц по-прежнему отображается. Вместо этого мне приходится делать два щелчка каждый раз, когда я хочу изменить месяц.

Когда я делаю хук useEffect не зависящим ни от чего, бэкэнд-запрос явно не запускается, но месяц изменяется соответствующим образом.

Любые предложения приветствуются. Спасибо

import React, { useState, useEffect } from "react";
import { Calendar, Badge } from "antd";

import moment from "moment";
import axios from "axios";
import { tokenConfig } from "../../actions/auth";
import { connect } from "react-redux";
import store from "../../store";

function PreviousMessages() {
  const [month, setMonth] = useState(moment().month() + 1);
  const [numRefThisMonth, setNumRefThisMonth] = useState(0);

  const [listOfRefsByDate, setListOfRefsByDate] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [dateSelected, setDateSelected] = useState(false);
  const [selectedDay, setSelectedDay] = useState();

  useEffect(() => {
    console.log(`from Use STATE::Month is ${month}`);
    setIsLoading(true);
    let tempState = {};
    axios
      .get(`/api/messages?month=${month}`, tokenConfig(store.getState))
      .then((res) => {
        setNumRefThisMonth(res.data.length);
        console.log(res);

        res.data.map((day) => {
          const dayNum = day.created_at.substring(8, 10);

          if (tempState.hasOwnProperty(dayNum)) {
            tempState[dayNum]++;
          } else {
            tempState[dayNum] = 1;
          }
        });
        setListOfRefsByDate(tempState);
        setIsLoading(false);
      })
      .catch((err) => {
        setIsLoading(false);
        console.log(err);
      });
  }, [month]);

  function dateCellRender(value) {
    let listData = [];

    const currDate =
      value.date() < 10
        ? "0" + value.date().toString()
        : value.date().toString();

    if (
      listOfRefsByDate.hasOwnProperty(currDate) &&
      value.month() + 1 === month
    ) {
      listData = [
        {
          type: "success",
          content: `${listOfRefsByDate[currDate]} Reflections`,
        },
      ];
    }
    return (
      <dl className="events">
        {listData.map((item) => (
          <dd key={item.content}>
            <Badge status={item.type} text={item.content} />
          </dd>
        ))}
      </dl>
    );
  }

  //when a date is selected
  //does not do anything right now
  function onSelect(value) {
    console.log(value.month() + 1);
  }

  //this handles when we change the month
  function onPanelChange(date) {
    console.log("Month changes");
    setMonth(date.month() + 1);
    console.log(`The current month is ${date.month() + 1}`);
  }
  function monthClick() {
    console.log("Hello");
  }

  return (
    <div>
      <h3>You have {numRefThisMonth} reflections this month</h3>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <Calendar
          dateCellRender={dateCellRender}
          onPanelChange={onPanelChange}
          onSelect={onSelect}
      )}
    </div>
  );
}

const mapStateToProps = (state) => ({
  auth: state.authReducer,
});

export default connect(mapStateToProps)(PreviousMessages);

Answer 1

Нашел ответ! Передайте в компонент свойство value с текущей датой. Мне нужно было записать текущую дату в состоянии и сделал useEffect зависимым от текущей даты.

import React, { useState, useEffect, useLayoutEffect } from "react";
import { Calendar, Badge } from "antd";
import { func } from "prop-types";
import { Redirect } from "react-router-dom";
import moment from "moment";
import axios from "axios";
import { tokenConfig } from "../../actions/auth";
import { connect } from "react-redux";
import store from "../../store";

function PreviousMessages() {
  const [currDate, setCurrDate] = useState(moment());
  const [numRefThisMonth, setNumRefThisMonth] = useState(0);
  const [listOfRefsByDate, setListOfRefsByDate] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [dateSelected, setDateSelected] = useState(false);
  const [selectedDay, setSelectedDay] = useState();

  useEffect(() => {
    console.log(`from Use STATE::Month is ${currDate.month() + 1}`);
    setIsLoading(true);
    let tempState = {};
    axios
      .get(
        `/api/messages?month=${currDate.month() + 1}`,
        tokenConfig(store.getState)
      )
      .then((res) => {
        setNumRefThisMonth(res.data.length);
        console.log(res);

        res.data.map((day) => {
          const dayNum = day.created_at.substring(8, 10);

          if (tempState.hasOwnProperty(dayNum)) {
            tempState[dayNum]++;
          } else {
            tempState[dayNum] = 1;
          }
        });
        setListOfRefsByDate(tempState);
        setIsLoading(false);
      })
      .catch((err) => {
        setIsLoading(false);
        console.log(err);
      });
  }, [currDate]);

  function dateCellRender(value) {
    let listData = [];

    const currDateRender =
      value.date() < 10
        ? "0" + value.date().toString()
        : value.date().toString();

    if (
      listOfRefsByDate.hasOwnProperty(currDateRender) &&
      value.month() === currDate.month()
    ) {
      listData = [
        {
          type: "success",
          content: `${listOfRefsByDate[currDateRender]} Reflections`,
        },
      ];
    }
    return (
      <dl className="events">
        {listData.map((item) => (
          <dd key={item.content}>
            <Badge status={item.type} text={item.content} />
          </dd>
        ))}
      </dl>
    );
  }

  //when a date is selected
  function onSelect(value) {
    if (value.month() === currDate.month()) {
      console.log(value);
      const currDateSelected =
        value.date() < 10
          ? "0" + value.date().toString()
          : value.date().toString();
      if (listOfRefsByDate.hasOwnProperty(currDateSelected)) {
        console.log(`The date is ${currDateSelected}`);
        setDateSelected(true);
        setSelectedDay(value);

        console.log(selectedDay);
      } else {
        console.log("You did not write that day");
      }
    }
  }

  //this handles when we change the month
  function onPanelChange(date) {
    console.log(date);
    setCurrDate(date);
  }

  if (dateSelected) {
    return (
      <Redirect
        push
        to={{
          pathname: "/previous_messages_specific_day",
          state: { requestedDay: selectedDay },
        }}
      />
    );
  }

  return (
    <div>
      <h3>You have {numRefThisMonth} reflections this month</h3>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <Calendar
          dateCellRender={dateCellRender}
          onPanelChange={onPanelChange}
          //onChange={onPanelChange}
          onSelect={onSelect}
          value={currDate}
        />
      )}
    </div>
  );
}

const mapStateToProps = (state) => ({
  auth: state.authReducer,
});

export default connect(mapStateToProps)(PreviousMessages);