Question

我正在通过对象数组进行映射，某些图像已损坏，因此我创建了一个函数来检查返回true或false的图像，如果为false，则使用占位符图像。

但是我遇到了一个错误，我认为是因为我在map函数中使用了三元运算符。有什么想法吗？

功能：

public renderProfile() {

// Grabs the array of objects
const profiles = this.state.profiles; 

// Renders the selected profile
const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => (

  this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : profile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

  <div key={shortid.generate()} className={styles.linkedInContainer}> 
    <DocumentCard
      aria-label={profile.postContent}
      onClickHref={profile.postUrl}
    > { profile.imgUrl && 
        <img className={styles.linkedInHeroImage } src={ profile.imgUrl } />
      }
      <DocumentCardTitle
        title={profile.postContent}
        shouldTruncate={true}
      />
      <DocumentCardActivity
        activity={`Likes: ${profile.likeCount}`}
        people={[{ name: 'Read more on linkedIn', profileImageSrc: profile.imgUrl ? profile.imgUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAA' }]}
      />
    </DocumentCard>
  </div>

));
return renderProfiles;
}

这刹车了：

this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : profile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

[15:43:22]错误-[tsc] src / webparts / linkedIn / components / LinkedIn.tsx（143,157）：错误TS1005：“）”。 [15:43:22]错误-[tsc] src / webparts / linkedIn / components / LinkedIn.tsx（163,5）：错误TS1128：需要声明或声明。 [15:43:22]错误-[tsc] src / webparts / linkedIn / components / LinkedIn.tsx（163,6）：错误TS1128：需要声明或声明。

检查图像功能：

  // Checks linkedIn images for broken ones
  private checkImageUrl(url) {
    var lastPart = url.substr(url.lastIndexOf('=') + 1);
    if (lastPart === "image") {
       return true;
    } else {
      return false;
    }
  }

https://codepen.io/bkdigital/pen/poojmbo?editors=1011-这证明了检查网址功能正常

Answer 1

在这行上

const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => (

您使用.map()启动传递给(的函数。 JavaScript会将其后的所有内容解释为该函数的返回值。由于您的函数中包含另一个语句，因此将导致错误。

您应按以下步骤进行更改：

const renderProfiles = profiles.splice(0, this.props.postCount).map(profile => {
  this.checkImageUrl(profile.imgUrl) ? profile.imgUrl : selectedProfile.imgUrl = 'https://via.placeholder.com/300x167.png?text=LINKEDIN';

  return (
    <div key={shortid.generate()} className={styles.linkedInContainer}> 
      <DocumentCard
        aria-label={profile.postContent}
        onClickHref={profile.postUrl}
      > { profile.imgUrl && 
        <img className={styles.linkedInHeroImage } src={ profile.imgUrl } />
      }
      <DocumentCardTitle
        title={profile.postContent}
        shouldTruncate={true}
      />
      <DocumentCardActivity
        activity={`Likes: ${profile.likeCount}`}
        people={[{ name: 'Read more on linkedIn', profileImageSrc: profile.imgUrl ? profile.imgUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAA' }]}
      />
    </DocumentCard>
  </div>
  );
});

未在地图功能中使用的三元运算符反应

1 个答案: