当我在控制台上记录this.props时,我得到了一个带有post.id的数组,我想使用onClick函数从列表中删除该项目,并且不在页面上显示 我的代码在那里有什么问题?
这就是我所拥有的
export const deletePost = id => dispatch => {
fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: "DELETE"
})
.then(res => res.json())
.then(post =>
dispatch({
type: DELETE_POST,
payload: id
}),
);
};
my reducer:
const initialState = {
items: [],
item: {}
};
case FETCH_POSTS:
return {
...state,
items: action.payload
};
case DELETE_POST:
return {
...state,
items: action.payload
};
Component contains of
const mapStateToProps = state => ({
posts: state.postsReducer.items,
});
const mapDispatchToProps = {
fetchPosts, deletePost
}
And Delete button on each post:
<button key={post.id} onClick={()=>this.props.deletePost()}>X</button>```
答案 0 :(得分:2)
我在这里看到了几件事,您应该看一下,希望它们能帮助您解决问题。
首先,请注意,您的deletePost
函数需要带有帖子ID的参数。但是,在为按钮发布的JSX代码中,根本没有将任何值传递给该函数。这意味着属性payload
在分派动作时将具有一个undefined
值。
请确保更新视图以为其传递ID,以便调用适当的端点(您的DELETE
请求现在可能指向https://jsonplaceholder.typicode.com/posts/undefined
),并且reducer实际上收到了该ID。您要删除的帖子:
<button key={post.id} onClick={()=>this.props.deletePost(post.id)}>X</button>
您需要检查的第二件事是减速器的实现。根据您对消息和deletePost
方法的代码的理解,action.payload
应该包含一个数字。
在这种情况下,您的减速器如何处理减速器中的DELETE_POST
操作对我来说并没有太大意义。
case DELETE_POST:
return {
...state,
items: action.payload
};
归约器应该是纯函数,对于给定的状态和动作,它会根据收到的动作返回一个全新的状态。还要记住,您接收到的状态根本无法更改:如果原始实例以任何方式发生了变异,您的代码将无法工作。
在这种情况下,您需要返回一个新状态,在该状态下,您的items
属性被一个新列表替换,该列表中缺少要删除的ID。但是,在您编写的代码段中,您要用数字替换items
数组。从items
仍然应该是数字数组这一事实开始,这不是应该发生的事情。
您实际需要做的是创建一个不包含您要删除的项目的新阵列。您可以使用filter
方法来实现:
case DELETE_POST:
return {
...state,
items: state.items.filter(item => item !== action.payload)
};
此代码应完全满足您的要求:在这里,我们为您所在州的items
属性分配一个全新的数组,其中不包含已删除的帖子。
filter
返回一个数组,其中包含指定函数返回true
的项目。在这种情况下,我们传递给filter
的箭头函数会针对与您要删除的帖子的ID不同的每个项目返回true
。
通过使用此方法,您也不会以任何方式更改初始state.items
值的问题,因为filter
返回了Array
的新实例,并且不会更改原始实例。