从映射中排除项目

时间:2019-07-15 10:49:12

标签: reactjs

我想从映射中明确排除imgvid并将其传递给PostContainer Component,这会导致组件的渲染。我希望imgvid从PostList传递至PostContainer。但是如果没有这种双重映射(在postContainer和postList中),我将无法正确获取我在.jsx页面中的数据。但是这种双重映射会导致.jsx页面的重新渲染,并且会使首页中的内容翻倍。

<React.Fragment>
  <div style={{ marginTop: "10px" }}>
    {posts.map(item => (
      <PostContainer
        isStylefeed={isStylefeed}
        likeAccess={likeAccess}
        commentAccess={commentAccess}
        wowAccess={wowAccess}
        yayAccess={yayAccess}
        post={item}
        imgvid={imgvid}
        key={item[ID]}
        loadPosts={loadPosts}
        currentCommunity={currentCommunity}
        currentCommunityID={currentCommunityID}
        handlePosts={handlePosts}
        getOutfits={getOutfits}
        isMember={isMember}
      />
    ))}
  </div>
</React.Fragment>

// PostContainer.jsx

return (
  <React.Fragment>
    <div>
      {imgvid
        && imgvid.map(item => (
          <Posts
            likeAccess={likeAccess}
            commentAccess={commentAccess}
            wowAccess={wowAccess}
            isStylefeed={isStylefeed}
            yayAccess={yayAccess}
            handleRedirectOutfitPage={this.handleRedirectOutfitPage}
            currentCommunity={currentCommunity}
            toggleFlagModal={this.toggleFlagModal}
            handleFlaggedPostReasonChange={this.handleFlaggedPostReasonChange}
            deletePost={this.deletePost}
            handledeleteComment={this.handledeleteComment}
            getCurrentProfile={this.getCurrentProfile}
            onReadOnlyProfile={this.onReadOnlyProfile}
            updatePost={this.updatePost}
            handleUpdatePost={this.handleUpdatePost}
            toggleUpdate={this.toggleUpdate}
            toggleOptions={this.toggleOptions}
            handleFlagPost={this.handleFlagPost}
            flagModal={flagModal}
            post={post}
            likesProfile={likesProfile}
            followersProfile={followersProfile}
            outfits={outfits}
            readOnlyProfileModal={readOnlyProfileModal}
            modalUpdate={modalUpdate}
            postText={text}
            postOptions={postOptions}
            getAllCommentsByPostId={this.getAllCommentsByPostId}
            currentCommunityID={currentCommunityID}
            outfitChanged={outfitChanged}
            getLatestPost={this.getLatestPost}
            toggleMessageModal={this.toggleMessageModal}
            messageModal={messageModal}
            refData={refData}
            showflagModal={showflagModal}
            checkFlaggedOrNot={this.checkFlaggedOrNot}
            flagged={flagged}
            isMember={isMember}
            imgvid={item}
            email={email}
          />
        ))}
    </div>
  </React.Fragment>
);

0 个答案:

没有答案