时间戳

首页 > 解决方案 > 我们如何在map函数中具体使用来自api的数据呢？

reactjs - 我们如何在map函数中具体使用来自api的数据呢？

问题描述

我正在使用 react 和 redux 创建 Facebook 副本。我从 API（json-server）获取我的帖子数据。在每个帖子中，我都有一个发布菜单按钮。当我单击它时，它会打开后菜单。但是，因为我在地图功能中使用了我的数据，所以当我单击帖子菜单图标时，它会打开所有帖子的帖子菜单。在告诉我尝试了什么之前，让我展示我的代码。

动作类型

export const OPEN_POST_DROPDOWN = "OPEN_POST_DROPDOWN"

行动

export function openPostDropdown() {
    return { type: actionTypes.OPEN_POST_DROPDOWN, payload: null }
}

状态

isPostDropdownOpened: false,
posts: []

减速器

case actionTypes.OPEN_POST_DROPDOWN:
    return {
       ...state,
       isPostDropdownOpened: !state.isPostDropdownOpened
    }

用户界面

clickHandler() {
        this.props.actions.openPostDropdown()
    }

{posts.map(post => (
         <div key={post.id} className="post mt-3">
                <div className="post-header">
                    <div className="post-name-and-pp-area">
                        <div className="post-pp-area">
                            <img src={post.post_owner_pp} alt="user-pp" />
                        </div>
                        <div className="post-user-area">
                            <span className="post-user-name">{post.post_owner}</span>

                            <div className="post-time-and-public-area">
                                <span className="post-time">{post.post_time}</span> · <i className="fas fa-user-friends"></i>
                            </div>
                         </div>
                    </div>

                            <i onClick={() => this.clickHandler()} className="fas fa-ellipsis-h post-menu"></i>

                            {isPostDropdownOpened ? <PostMenu post={post} /> : null}
                        </div>
.
.
.

项目中没有错误，但我找不到关于如何在单击它时管理它的解决方案，只显示一个后菜单。

我试图将我的帖子状态复制到类似数组中

post_array = Array(post.length).fill(null)

但后来我跌跌撞撞。

事件也无法帮助我处理这个问题。我在 Internet 上找不到这种情况的教育内容。

如何对数据或地图函数中的任何内容进行特定操作？

标签： reactjsredux

解决方案

我得到了解决方案

1.

 currentActivePost: null

clickHandler(post) {
        this.props.actions.openPostDropdown(post)
}

export function openPostDropdown(post) {
    return { type: actionTypes.OPEN_POST_DROPDOWN, payload: post }
}

case actionTypes.OPEN_POST_DROPDOWN:
            return {
                ...state,
                isPostDropdownOpened: !state.isPostDropdownOpened,
                currentActivePost: action.payload
            }

{isPostDropdownOpened && post.id === currentActivePost.id ? <PostMenu post={post} /> : null}

推荐阅读