时间戳

首页 > 解决方案 > Invariant Violation: Avatar(...): 没有从渲染返回。这通常意味着缺少返回语句

reactjs - Invariant Violation: Avatar(...): 没有从渲染返回。这通常意味着缺少返回语句

问题描述

renderIconWrapper = (altText,imgSrc) => {
    return (
           <IconWrapper>
            <DoctorImage alt={altText} src={imgSrc}/>
          </IconWrapper>
        )
  }
render(){
const {gender, detailsGender, providerDetailTypeNm} = this.props;
if (providerDetailTypeNm === "Professional") {
      if (gender === "M" || detailsGender === "Male") {
        this.renderIconWrapper('male-avatar',maleAvatar)
      } else if (gender === 'F') {
        this.renderIconWrapper('female-avatar',femaleAvatar)
      }
    } else if (providerDetailTypeNm === 'Facility' || providerDetailTypeNm === 'Supplier Business') {
      this.renderIconWrapper('fa-hospital',faHospital)
      
    } else if (providerDetailTypeNm === 'Group') {
       this.renderIconWrapper('fa-users',faUsers)
    } else {
      this.renderIconWrapper('fa-users',faUsers)
    }
 }

我得到不变违规：...）：渲染没有返回任何内容。有人可以让我知道代码中的错误是什么吗？我认为我在语法中遗漏了一些东西或一些错误。

谢谢

标签： reactjs

解决方案

尽管renderIconWrapper方法返回一个 JSX 元素，但您并没有从 render 返回它的结果。从渲染调用return返回结果this.renderIconWrapper

renderIconWrapper = (altText,imgSrc) => {
    return (
           <IconWrapper>
            <DoctorImage alt={altText} src={imgSrc}/>
          </IconWrapper>
        )
  }
render(){
   const {gender, detailsGender, providerDetailTypeNm} = this.props;
   if (providerDetailTypeNm === "Professional") {
      if (gender === "M" || detailsGender === "Male") {
        return this.renderIconWrapper('male-avatar',maleAvatar)
      } else if (gender === 'F') {
        return this.renderIconWrapper('female-avatar',femaleAvatar)
      }
   } else if (providerDetailTypeNm === 'Facility' || providerDetailTypeNm === 'Supplier Business') {
      return this.renderIconWrapper('fa-hospital',faHospital)
      
    } else if (providerDetailTypeNm === 'Group') {
       return this.renderIconWrapper('fa-users',faUsers)
    } else {
      return this.renderIconWrapper('fa-users',faUsers)
    }
 }

推荐阅读