目前，我正在开发一个通知页面。
我正在使用反冲来管理用户是否检查了通知的状态。
反冲状态也存储在本地存储器上，以便它不会在刷新时消失。
如果用户勾选了公告，则reilisNoticeView状态为true，而如果公告未被勾选，则为false。
因此，我们认为，

{!isNoticeView && (
  <div className="ml-1 h-2 w-2 rounded-full bg-status-error"></div>
)}

字符串
应根据isNoticeView状态值添加。
如果我在查看通知后刷新通知页面
第一个月
发生此错误。
通知页面的整个代码如下。

import NavBar from '@components/common/NavBar';
import PageLayout from '@components/layout/PageLayout';
import Image from 'next/image';
import { useState } from 'react';
import { noticeState } from '@recoil/noticeAtom';
import { useRecoilState } from 'recoil';

const Notice = () => {
  const [isNoticeView, setIsNoticeView] = useRecoilState<boolean>(noticeState);
  const [isView, setIsView] = useState<boolean>(false);

  return (
    <PageLayout>
      <NavBar isLeft={true} centerTitle="notice" />
      <section className="my-[68px]">
        <div className="mb-1 bg-white py-2 px-4">
          <div className="flex justify-between text-body2">
            <div className="flex">
              <p>hi</p>
              {!isNoticeView && (
                <div className="ml-1 h-2 w-2 rounded-full bg-status-error"></div>
              )}
            </div>
            <Image
              src={isView ? '/svg/dropdown.svg' : '/svg/dropup.svg'}
              alt="open"
              width={20}
              height={20}
              onClick={() => {
                if (isView) {
                  setIsView(false);
                } else {
                  setIsNoticeView(true);
                  setIsView(true);
                }
              }}
            />
          </div>
          {isView && <p className="py-5 text-body1">asdasd</p>}
        </div>
      </section>
    </PageLayout>
  );
};

export default Notice;

型
请帮帮我..