0

在我的主要组件 App.js 中，我有一个从 redux 存储接收到的数据数组，如下所示：

[
   {...}, {...}
]

数组中的每个对象都包含有关我映射以显示为预览卡的帖子（如 reddit 帖子）的信息。单击该预览卡后，将显示一个模式卡，其中包含帖子的详细视图。

// From App.js: 
return (
    <div className="entirePostList">
        <NavBar />
        <div className="postListContainer">
            <div className="postListRow">
                {posts.map((post) => (
                    <div key={post.id} onClick={this.openDetailsPostModal}>
                        <PostCard post={post} />
                    </div>
                ))}
            </div>
        </div>
        <button className="newPostButton"
                onClick={this.openCreatePostModal}>
            <MdAddCircle />
        </button>

        <Modal // VIEW POST DETAILS MODAL
          className='modal'
          overlayClassName='createOverlay'
          isOpen={detailsPostModalOpen}
          onRequestClose={this.closeDetailsPostModal}
          contentLabel='Modal'
        >
            <div>
                {loadingDetailsPost === true
                    ?   <div>
                            <div className="postEditorBg" />
                            <Loading type='bubbles' 
                                     delay={200} 
                                     color='#fed80a' 
                                     className="loading"
                                     width={120} />
                        </div>
                    :   <div>
                            <div className="postEditorBg" />
                            <PostCardDetails />
                        </div>
                }
            </div>
        </Modal>

在<PostCardDetails />组件中，我从 redux 存储接收相同的数据数组，并以相同的方式映射它以将数据显示为 UI。它显示正确，但问题是当我单击卡片预览时，它显示错误的详细卡片（不是您根据预览期望的卡片）。

这是github repo，以防需要更多上下文。

我已经超越了这一点——能够回答这个问题的人将获得对永恒的爱和尊重。

4

0 回答 0