我如何使用 Zustand 和 ResizeObserver

Question

我创建了这个钩子。但由于某种原因，它不起作用。 isDesktop 在 1280px 下返回 false 但 <profilelayout> 不会消失。它应该只显示<Form /> 组件。谁能帮我我想不通

export const useDeviceType = create(set => {
  let isDesktop = false;
  let isPhone = false;

 const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const { clientWidth } = entry.target;
      if (clientWidth > 1280) {
        isPhone = false;
        isDesktop = true;
      } else {
        isDesktop = true;
        isPhone = false;
      }
      set({ isDesktop, isPhone });
    }
  });

if (typeof document !== 'undefined') {
    resizeObserver.observe(document.body);
}
  return { isDesktop, isPhone };
});

const EditEmail = () => {

    const isDesktop = useDeviceType();
  return (
    <>
      {isDesktop ? 
        <ProfileLayout>
           <Form />
        </ProfileLayout> :
          <Form /> 
      }
    </>
  );

Answer 1

因为您的 if 和 else 块是相同的：

if (clientWidth > 1280) {
  isPhone = false;
  isDesktop = true;
} else {
  isDesktop = true;
  isPhone = false;
}