[英]Antd Calendar Does Not Show Selected Month on State Change
当我第一次尝试从下拉列表中选择 Antd 日历组件时,它没有显示所选月份。 请注意,我的 useEffect 挂钩取决于月份的变化(由 onPaneChange 设置)。当我更改月份时,挂钩会触发并从后端检索数据并将其放入 state。但是,仍然显示上个月. 相反,每次我想更改月份时,我都必须点击两次。
当我使 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);
找到了答案。 将带有当前日期的 value prop 传递到组件中。 我需要在 state 中记录当前日期,并使 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.