Question

在我的React App中，我也在使用Redux。此方案涉及三个UI \文件。

1）仪表板 –这是打开过滤器（抽屉）组件的主页。此页面还包含一个表组件。控制哪些表呈现的能力基于“筛选器”组件中的选项。

const Table = () => {
    if (reportCode === 0) {
        return <SwapSummary />
    }
    if (reportCode === 1) {
        return <MonthlyTrending openDrawer={openDrawer} />
    }
}

<Drawer open={openDrawer} onClose={toggleDrawer(false)}>
            <div className={classes.drawerHeader}>
                <IconButton onClick={toggleDrawer(false)}>
                    <ChevronLeftIcon />
                </IconButton>
            </div>
            <Divider />
            <DashboardFilterList
                setOpen={setOpenDrawer}
                reportValue={reportCode}
                setReportValue={setReportCode} />
        </Drawer>
        <Table />

2）过滤器（抽屉） –该组件保留一个选定菜单，以便选择不同的表。它还在对话框中有一个DataRange组件和一个Submit按钮。

const dateRangeData = useSelector(state => state.dateRange.data);
const [dateRange, setDateRange] = useState([
    {
        startDate: dateRangeData[0] ? dateRangeData[0].startDate : new Date(),
        endDate: dateRangeData[0] ? dateRangeData[0].endDate : null,
        key: 'selection'
    }
]);
// date change
const storeDateRange = useCallback(() => { dispatch(monthlyTrendingAction.setRangeDate(dateRange[0])) }, [dispatch, dateRange]);
useEffect(() => { storeDateRange() }, [storeDateRange]);

           <ListItem>
                    <Button
                        variant="outlined"
                        color="primary"
                        fullWidth={true}
                        startIcon={<DateRangeIcon />}
                        onClick={handleOpenCalendar}>Date Range</Button>
                    <Dialog
                        open={openCalendar}
                        onClose={handleCloseCalendar}>
                        <DialogContent>
                            <DateRange
                                editableDateInputs={true}
                                moveRangeOnFirstSelection={false}
                                ranges={dateRangeData}
                                onChange={item => setDateRange([item.selection])}
                            />
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleCloseCalendar} autoFocus color="primary">Ok</Button>
                        </DialogActions>
                    </Dialog>
                </ListItem> : ''}
            <ListItem>
                <Button
                    style={{ textTransform: 'capitalize' }}
                    variant="outlined"
                    color="primary"
                    fullWidth={true}
                    onClick={onClick}>Submit
                 </Button>
            </ListItem>

3）表-此组件将根据过滤值（数据范围）从数据库中获取数据。

const dateRangeData = useSelector(state => state.dateRange.data);
const dispatch = useDispatch();
const findMonthlyTrending = useCallback(() => {
    console.log('Run only when draw is closed and dates are diffrent')
    if (props.openDrawer && dateRangeData[0] && dateRangeData[0].endDate) {
        dispatch(monthlyTrendingAction.findMonthlyTrending(
            moment(dateRangeData[0].startDate).format('L'),
            moment(dateRangeData[0].endDate).format('L')))
    }
}, [dispatch, props.openDrawer, dateRangeData]);
useEffect(() => { findMonthlyTrending() }, [findMonthlyTrending]);

const monthlyTrendingData = useSelector(state => state.monthlyTrending.data);
const isLoadingmonthlyTrending = useSelector(state => 
state.monthlyTrending.isLoading);

由于我是通过商店管理DateRange的，因此对于日期范围内的每个更改（onChange），都会有一个对数据库的调用。

我要实现的目标：我只想在用户提交过滤选项并且关闭过滤器（抽屉关闭）后才向数据库发送Rest调用。 D B。另外，如果用户未更新\更改日期范围，则也不要转到数据库。

由于我将filter（drawer）openDrawer状态传递给子表，因此我可以控制数据库调用，但无法弄清楚如何处理DateRange方案。我怎么知道用户是否选择了不同的日期范围（以前的状态）？如何阻止onChange发起对数据库的调用？

我希望我清楚。感谢您的帮助。

谢谢

如何通过useEffect

0 个答案: