× 类型错误：无法读取未定义的属性（读取“名称”）

Question

问题是 currentPackage 的未定义。 渲染（）{ const { hasAccounts，asideClassesFromConfig，disableScroll，htmlClassService，currentPackage，用户，} = this.props; const isActive = checkStatus(user?.status);

const packageLogo = currentPackage.name && currentPackage.logo && (
  <div className="vk-inductee-button-wrapper">
    <div className="vk-inductee-button-image-wrapper">
      <img
        src={currentPackage.logo}
        className="vk-inductee-button-image"
        alt="inductee-img"
      />
    </div>
    <div className="vk-inductee-button-label">
      <span>{currentPackage.name}</span>
    </div>
  </div>
);

return (
  <>
    <button className="kt-aside-close" id="kt_aside_close_btn">
      <i className="la la-close" />
    </button>
    <div
      id="kt_aside"
      ref={this.asideOffCanvasRef}
      className={`kt-aside ${asideClassesFromConfig} kt-grid__item kt-grid kt-grid--desktop kt-grid--hor-desktop`}>
      <Brand />
      <div
        id="kt_aside_menu_wrapper"
        className="kt-aside-menu-wrapper kt-grid__item kt-grid__item--fluid">
        <AsideDropdown />
        {isActive ? (
          <Link to="/shop/my-packages">{packageLogo}</Link>
        ) : (
          packageLogo
        )}
        {disableScroll && <Menu htmlClassService={htmlClassService} />}
        {!disableScroll && (
          <PerfectScrollbar
            options={{ wheelSpeed: 2, wheelPropagation: false }}>
            <Menu htmlClassService={htmlClassService} />
          </PerfectScrollbar>
        )}
        {hasAccounts && <AsideFooter />}
      </div>
    </div>
  </>
);

} }

Answer 1

你可能会做类似的事情

const packageLogo = currentPackage && currentPackage.name && currentPackage.logo && (
  <>
   //your code
  </>
)

问题是currentPackage未定义，但您正在检查currentPackage.name是否为真。 由于undefined上不存在属性name ，因此您会收到该错误。 在检查特定属性之前，您只需要检查currentPackage本身是否为真。