提问人:user10980228 提问时间:11/14/2023 更新时间:11/14/2023 访问量:29
无法使用 react day picker 和 Next.js 设置初始日期
Not able to set initial dates using react day picker and Next.js
问:
我正在使用 Next.js、React Query 和 React Day Picker 和 React Hook Form。
我正在使用 React Query 从端点获取一些日期,我想将这些日期设置为选择的初始日期。如果我在网站上导航并转到该页面,则日期将显示为所选日期。但是,如果我刷新页面,则不会显示日期。我必须导航到另一个页面并导航回去查看所选日期。
const {
data: initialDatesTest,
error,
isLoading,
} = useQuery({
queryKey: ["dates"],
queryFn: getDates,
});
async function getDates() {
const response = await fetch("/api/dates-to-exclude");
const data = await response.json();
const parsedExcludedDates = data.excludedDates.PartyExcludeDates.map(
(dateString: string) => new Date(dateString)
);
return parsedExcludedDates;
}
const initialDays: Date[] = initialDatesTest || [];
const [days, setDays] = useState<Date[] | undefined>(initialDays);
<Controller
control={control}
name="DayPicker"
render={({ field }) => (
<DayPicker
mode="multiple"
min={1}
selected={days}
onSelect={setDays}
footer={footer}
disabled={{ before: new Date() }}
numberOfMonths={1}
/>
)}
/>
答:
1赞
Joe Lissner
11/14/2023
#1
这是因为在获取数据之前未定义,并且初始值仅在第一次渲染时设置。您想调用 的 .类似的东西initialDatesTest
setDays
onSuccess
useQuery
const {
data: initialDatesTest,
error,
isLoading,
} = useQuery({
queryKey: ["dates"],
queryFn: getDates,
});
async function getDates() {
const response = await fetch("/api/dates-to-exclude");
const data = await response.json();
const parsedExcludedDates = data.excludedDates.PartyExcludeDates.map(
(dateString: string) => new Date(dateString)
);
setDates(parsedExcludedDates); // update state to reflect what was returned from server.
return parsedExcludedDates;
}
评论
0赞
user10980228
11/14/2023
谢谢你。我收到错误 Object literal may only specify known properties,并且“onSuccess”类型“any<Error, any, string[]>'.ts(2769)中不存在。它不会阻止应用程序运行,但也不能解决问题。当我刷新时,我仍然看不到日期,直到我导航并返回
0赞
Joe Lissner
11/14/2023
啊,你可能在不同的版本上。所以你必须更新你的 getDates fn 来处理我相信。我将更新我的代码以反映这些更改。
1赞
user10980228
11/14/2023
非常感谢!我只能稍后尝试,但一旦我有,我一定会回复。
评论