我想从映射中明确排除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>
);