不变违规：Avatar（...）：渲染未返回任何内容。这通常意味着缺少return语句

Question

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)
    }
 }

我遇到了永久违规：...）：渲染未返回任何内容。 有人可以让我知道代码中的错误是什么吗？我认为我在语法中缺少某些或某些错误。

谢谢

Answer 1

尽管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)
    }
 }