从状态提取数据时无法读取 null 的属性

Question

我试图在标志为 true 时显示导航项，但问题是，当我尝试从中获取以下数据时，它返回给我未定义，我为此创建了以下内容：

let navigate = useNavigate();

  const userSignin = useSelector((state: RootStateOrAny) => state.userSignin);
  const { userInfo } = userSignin;

  const checkAdmin = useCallback(() => {
    if (userInfo) {
      if (typeof userInfo.user === "undefined") {
        return null;
      } else {
        return userInfo.user.isAdmin;
      }
    } else {
      return null;
    }
  }, []);

useEffect(() => {
    checkAdmin();
    if (!userInfo.user.isAdmin) {
      navigate("/");
    }
  }, [checkAdmin]);

我执行了 checkAdmin 函数，因为在此之前，我有 userInfo.user.isAdmin ，它返回给我未定义。

{checkAdmin() && (
            <NavbarItem
              component='li'
              onMouseEnter={() => setTopMenuIndex(4)}
              onMouseLeave={() => setTopMenuIndex(-1)}
            >
              <Box
                style={{ whiteSpace: "nowrap" }}
                component='a'
                {...{ href: "/createItem" }}
              >
                {topMenuIndex === 4 && <Tippy topMenuIndex={topMenuIndex} />}
                Admin Dashboard
              </Box>
            </NavbarItem>
          )}

现在我想确保，如果您没有该标志，您将被重定向到主页，但使用 userInfo.user.isAdmin 现在返回 null。我怎样才能更好地重新编码这个逻辑，或者我怎样才能至少使这个 useEffect 正确工作。

Answer 1

首先，您在数组内的 useEffect 中传递 checkAdmin，但它是一个函数。据我所知，您只能传递状态或道具来刷新组件或重新渲染。

我不确定到底要问什么，但据我说。

let navigate = useNavigate();

const userSignin = useSelector((state: RootStateOrAny) => state.userSignin);
const { userInfo } = userSignin;

// Old Node Version
const checkAdmin = () => {
  if(userInfo) {
    if(userInfo.user) {
      return userInfo.user.isAdmin
    }
  };
  return false;
};

// New Node Version
const checkAdmin = () => {
  if(userInfo?.user?.isAdmin) {
    return userInfo.user.isAdmin
  };
  return false;
};

useEffect(() => {
    if (!checkAdmin()) {
      navigate("/");
    }
  }, [userInfo]);