我有两个带有开始日期和结束日期的日期选择器
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
<DatePicker
sx={{ flex: 1, minWidth: "150px" }}
label="Start day"
onAccept={handleStartDateChanged}
/>
<DatePicker
sx={{ flex: 1, minWidth: "150px" }}
label="End day"
onAccept={handleEndDateChanged}
/>
</Box>
{periodSet ? (
<Capacity timelineStart={startDate} timelineEnd={endDate} />
) : null}
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [periodSet, setPeriodSet] = useState(false);
const handleStartDateChanged = (e) => {
setStartDate(e);
setPeriodSet(startDate && endDate);
console.log(periodSet);
};
const handleEndDateChanged = (e) => {
setEndDate(e);
setPeriodSet(startDate && endDate);
console.log(periodSet);
};
当为两者选择一个日期时,我想显示一个在该特定时间段获取数据的组件。 我已经在努力解决这个组件的显示和隐藏问题。选择两个日期后,该组件不会显示。您需要第三个选择来显示该组件。 我认为这是由于在设置
startDate
之前对 endDate
和 periodSet
的异步设置不完整造成的。状态更改完成时是否有某种回调?或者是否有一些更优雅的方式,例如绑定或类似的方式?或者更好地使用像 useEffect 这样的钩子或其他什么?抱歉,如果这个问题有点愚蠢。我对 React 很陌生
我尝试了不同的事情,比如尝试回调,但行为并不符合预期
setStartDate((e) => {
setPeriodSet(startDate && endDate);
});
您不需要为此声明。只是常规变量
const periodSet = Boolean(startData && endDate)