尝试从数据库中删除项目时更新父组件时出现问题。
我创建简单地从我的数据库中获取项目:
const filter = useFilter((query) => query.eq("createDate", date), [date]);
const [{ data, fetching, error }] = useSelect("payments_subitems", {
filter,
});
然后用简单的Map函数返回。
但是,我创建了另一个组件来从数据库中删除项目:
第一个月
const supabaseClient = useSupabaseClient();
const removeAction = async () => {
try {
const { data, error } = await supabaseClient
.from("payments_items")
.delete()
.eq("date", id);
if (error) throw error;
} catch (error: any) {
alert(error.message);
}
};
然后返回简单按钮:
<Button
className="w-full text-white bg-red-600 hover:bg-red-700"
onClick={() => removeAction()}
>
{title}
</Button>
删除操作工作正常...但是当我删除一个项目时-父组件没有更改我的折叠列表中的项目列表:(
有人能帮我吗?
我尝试使用useEffect
,但无法运作:/我不知道我做错了什麽:(
我的父组件:
export function GetPaymentsSubitems({ date }: GetPaymentsSubitemsProps) {
const filter = useFilter((query) => query.eq("createDate", date), [date]);
const [{ data, fetching, error }] = useSelect("payments_subitems", {
filter,
});
return (
<>
{data?.map(({ title, value }, index) => {
return (
<div key={index} className="flex justify-between">
<div>{title}</div>
<div>{value}</div>
</div>
);
})}
</>
);
}
export function GetPaymentsAccordion({
userId,
children,
}: GetPaymentsAccordionProps) {
const payments: any = useSelector<any>((state) => state.payments);
const countReduxPayments = payments.payments.length;
const filter = useFilter((query) => query.eq("author", userId), [userId]);
const [{ data, fetching, error }] = useSelect("payments_items", {
filter,
pause: !userId,
});
const [expanded, setExpanded] = useState<string | false>(false);
const handleChange =
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded(isExpanded ? panel : false);
};
if (error)
return (
<Alert severity="error">
<AlertTitle>Błąd</AlertTitle>
{error.message}
</Alert>
);
if (fetching)
return (
<div className="flex items-center justify-center">
<CircularProgress />
</div>
);
if (data?.length === 0 && countReduxPayments === 0)
return (
<Alert severity="info">
<AlertTitle>Brak danych</AlertTitle>
Nie posiadasz żadnych płatności
</Alert>
);
return (
<>
{data?.map(({ date }, index) => {
return (
<React.Fragment key={index}>
<Accordion
expanded={expanded === date}
onChange={handleChange(date)}
key={index}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
{date}
</AccordionSummary>
<AccordionDetails>
<GetPaymentsSubitems date={date} />
<RemoveItem id={date} />
</AccordionDetails>
</Accordion>
{children && children}
</React.Fragment>
);
})}
</>
);
}
谢谢!
1条答案
按热度按时间uxhixvfz1#
可以在
useSelect
下添加reexecute
参数然后使用此函数执行添加另一个prop来刷新数据,如下所示
最后一步是将
refresh()
属性添加到removeAction
中