Блог

Главная - Вопросы по программированию - Инвариантное нарушение: Avatar(…): из рендеринга ничего не было возвращено. Обычно это означает, что оператор return отсутствует

Инвариантное нарушение: Avatar(…): из рендеринга ничего не было возвращено. Обычно это означает, что оператор return отсутствует

#reactjs

#reactjs

Вопрос:

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

Я получаю инвариантное нарушение: …): из рендеринга ничего не было возвращено.
Не мог бы кто-нибудь сообщить мне, какие ошибки в коде, я думаю, что я что-то упускаю или какая-то ошибка в синтаксисе.

Спасибо

Ответ №1:

Хотя renderIconWrapper метод возвращает элемент JSX, вы не возвращаете его результат из render. Вызов return из render для возврата результата 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)
    }
 }