typescript Nextjs -从数据库(supabase)删除项目时更新另一个组件

gtlvzcf8  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(100)

尝试从数据库中删除项目时更新父组件时出现问题。
我创建简单地从我的数据库中获取项目:

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>
        );
      })}
    </>
  );
}

谢谢!

uxhixvfz

uxhixvfz1#

可以在useSelect下添加reexecute参数

const filter = useFilter((query) => query.eq("createDate", date), [date]);
  const [{ data, fetching, error }, reexecute] = useSelect("payments_subitems", {
    filter,
  });

然后使用此函数执行添加另一个prop来刷新数据,如下所示

<RemoveItem id={date} refresh={() => { reexecute() }}/>

最后一步是将refresh()属性添加到removeAction

const supabaseClient = useSupabaseClient();
  const removeAction = async () => {
    try {
      const { data, error } = await supabaseClient
        .from("payments_items")
        .delete()
        .eq("date", id);
      refresh(); //refresh your data here
      if (error) throw error;
    } catch (error: any) {
      alert(error.message);
    }
  };

相关问题