当我在控制台上记录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>```
我在这里看到了几件事，您应该看一下，希望它们能帮助您解决问题。
首先，请注意您的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返回true与您要删除的帖子ID不同的项。
通过使用此方法，您将不会有任何问题地改变初始state.items值，因为它会filter返回的新实例Array且不会更改原始实例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句