首页 > 解决方案 > 从映射中排除项目

问题描述

我想从映射中明确排除 imgvid 并将其传递给 PostContainer 组件。它会导致重新渲染组件。我希望 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>
);

标签: reactjs

解决方案


推荐阅读