Question

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

2022-03-01

51

javascript reactjs react-hooks

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

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]);