为什么 let 在 React 中失去了它的价值？

如何解决为什么 let 在 React 中失去了它的价值？

我有这个 React 代码。 organizationId 是一个 let 变量，如您所见。首先和 sendond 我可以看到价值，但第三个没有，这怎么可能？它是基于 Next.js 的项目。

function Event(props: EventProps) {
  const { lang,translations,eventId } = props;
  const [event,setEvent] = useState<EventOut | undefined>();
  const [enableSaleSwitch,setEnableSaleSwitch] = useState<boolean>(false);
  const [
    enableSaleSwitchOnwordpress,setEnableSaleSwitchOnwordpress,] = useState<boolean>(false);
  let isTiketAdmin: string | null;
  let jwt: string | null;
  let eventIdNew: string | undefined;
  let organizationId: string | undefined;
  let organization: OrganizationOut | undefined;
  let userFbId: string | null;
  let permission: string | undefined;

  useEffect(() => {
    isTiketAdmin = localStorage.getItem("isTiketAdmin");
    jwt = localStorage.getItem("jwt");
    userFbId = localStorage.getItem("userFbId");
  },[]);

  useEffect(() => {
    organizationId = getorganizationFbIdFromEventId(eventId);
    if (organizationId != undefined) {
      organization = getorganizationByFbId(organizationId!);
      if (organization && userFbId) {
        permission = organization.usersWithPermission[userFbId];
        setEvent(organization.events[eventId]);
      }
    }
  },[eventId]);

  useEffect(() => {
    if (event) {
      if (checkEnableSaleOnTiket(event,eventId)) {
        setEnableSaleSwitch(true);
      } else {
        setEnableSaleSwitch(false);
      }
      if (checkEnableSaleOnwordpress(event,eventId)) {
        setEnableSaleSwitchOnwordpress(true);
      } else {
        setEnableSaleSwitchOnwordpress(false);
      }
    }
  },[event]);

解决方法

首先，您应该描述发生了什么以及为什么它不是您所期望的，而不是仅仅发布 GIF 图片。

作为一个实际的答案，它为什么重要？您对该 useEffect 的依赖数组未指定 organizationId。

会发生什么：

1. 首次渲染，所有 useEffects 钩子都设置为运行。
2. 第二个钩子首先运行（忽略不相关的第一个钩子）。它分配 organizationId。
3. 第二个钩子调用 setEvent，排队重新渲染以备后用。
4. 随后运行第三个钩子（“并行”）并查看更新后的值。
5. 第二次渲染，由第 3 步引起。
6. 第二个钩子不运行，因为 eventId 没有改变。它的依赖数组表示仅在 eventId 更改时重新运行钩子效果。因此organizationId 不会再次设置。
7. 由于 event 发生了变化，因此运行了第三个钩子。如第 6 步所示，前一个钩子未运行此渲染，因此未设置变量。

如果您有一个变量需要在渲染之间保留并与钩子共享，请将其设为状态变量或引用。例如。使用 useState 或 useRef，具体取决于更新变量是否应重新渲染组件。