如何只调用一次五彩纸屑

【问题标题】：How to call confetti only once如何只调用一次五彩纸屑
【发布时间】：2022-02-15 17:52:14
【问题描述】：

if (isApplied && moreCount === 0 && route !== cartUrl && bagCouponActive) {
    return (
      <StickyBottomFooter bottom={bottomPosition}>
        <Confetti fire />
        <FlexBox
          spacing="py24 m-py12"
          align="center"
          justify="center"
          position="row"
          fullWidth
          style={{
            background: 'var(--secondary-green)',
            height: isMobile ? '40px' : '56px',
          }}
        >
          <Text size="16_24" mobileSize="14" thickness="medium" color="white">
            Congrats! you’ve unlocked '{couponCode}' offer
          </Text>

我正在使用 Confetti 来展示这一点，但每次刷新时都会出现这些只需要在主页中调用一次

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

如果您的意思是一次并保持刷新，您需要将五彩纸屑触发的信息存储在某个地方，例如在 localStorage/sessionStorage：

localStorage.set('fired',true)

然后检查它之前是否被触发

<Confetti fire={localStorage.get('fired')} />

如果您想在页面刷新时重置此状态并仅在路由器更改和重定向时保留此状态，只需将此信息保存在 useState 或 Redux store 中

【讨论】：

这里不需要使用localStorage，它只来一次，不刷新