gpt4 book ai didi

javascript - Prop 更改后 react 组件不会重新渲染

转载 作者:数据小太阳 更新时间:2023-10-29 04:21:16 26 4
gpt4 key购买 nike

每当用户单击我的组件上的按钮时,我都会尝试过滤状态中的一组对象。过滤的逻辑工作正常,但是当它返回到组件时,过滤的对象丢失了,而是属性未定义。我是否缺少生命周期方法?

点击事件:

<div onClick={this.filterMyPosts}>My Posts</div>
...
<div>
{this.renderPosts()}
</div>

过滤我的帖子

filterMyPosts() {
this.props.updateFilter("myPosts");
// filtering function uses switch statement based on strings to filter posts
}

组件容器:

const mapStateToProps = (state) => {
return {currentUser: state.session.currentUser,
posts: allPostsByFilter(state.posts, state.filter, state.session.currentUser.id, state.bookmarks)}
};

const mapDispatchToProps = (dispatch) => ({
updateFilter: (filter) => dispatch(updateFilter(filter))
})

过滤发生在不同的文件中,它返回一个对象中的过滤事件。这个逻辑没有错误。

问题:当它到达以下函数时,“posts”是未定义的。因此,在此过程中的某个地方,过滤后的帖子没有返回到组件。

renderPosts() {
return (
<div className ="user-profile-posts">
<ul>
{Object.keys(this.props.posts).map(id => <PostIndexItem
key={`posts-index-item${id}`}
post={this.props.posts[id]}
user={true}
/>)}
</ul>
</div>
);
}

编辑 - 过滤函数

export const allPostsByFilter = (filter, currentUserId, posts) => {
switch (filter) {
case "myPosts":

let postKeys = Object.keys(posts).filter( (id) => {
return(posts[id].user_id === currentUserId)
});
let userPosts = {}
postKeys.forEach( (key) => userPosts[key] = posts[key])
let newPosts = {}

let postKeys = Object.keys(posts).filter( (id) => {
return (Object.keys(userPosts).includes(id))
});
eventKeys.forEach( (key) => newPosts[key] = posts[key])

return newPosts

default:
return posts

最佳答案

绑定(bind)您的操作时,您将失去 this 上下文。

<div onClick={this.filterMyPosts}>My Posts</div>

将调用更改为

<div onClick={() => this.filterMyPosts()}>My Posts</div>

这确保了 this 在您的 filterMyPosts 方法中。没有它,props 是未定义的。

关于javascript - Prop 更改后 react 组件不会重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39313334/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com