Reactjs 使用React-Redux api删除请求删除帖子

当我在控制台上记录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>```

export const deletePost=id=>dispatch=>{
取回(`https://jsonplaceholder.typicode.com/posts/${id}`{
方法：“删除”
})
.then（res=>res.json（））
。然后（post=>
派遣({
类型：删除帖子，
有效载荷：id
}),
);
};
我的减速机：
常量初始状态={
项目：[]，
项目：{}
};
个案组职位：
返回{
……国家，
项目：行动.有效载荷
};
案例删除(u POST):
返回{
……国家，
项目：行动.有效载荷
};
组件包含
常量mapStateToProps=状态=>({
posts:state.postsReducer.items，
});
const mapDispatchToProps={
获取帖子，删除帖子
}
和每个帖子上的删除按钮：
this.props.deletePost（）}>X```

我在这里看到了一些您应该关注的问题，希望它们能帮助您解决问题

首先，请注意，

deletePost

函数需要一个带有post id的参数。但是，在为按钮发布的JSX代码中，您根本没有向函数传递任何值。这意味着在调度操作时，属性

有效负载

将具有一个

未定义的

值

确保更新视图以向其传递id，以便调用正确的端点（您的

DELETE

请求可能指向

https://jsonplaceholder.typicode.com/posts/undefined

现在）并且reducer实际接收到要删除的帖子的id：

<button key={post.id} onClick={()=>this.props.deletePost(post.id)}>X</button>

减缩器应该是纯函数，对于给定的状态和动作，它根据接收到的动作返回一个全新的状态。还要记住，您收到的状态根本无法更改：如果原始实例以任何方式发生了变化，那么您的代码将无法工作

在这种情况下，您需要返回一个新状态，其中您的

items

属性被一个新列表替换，其中您要删除的id丢失。但是，在您编写的代码段中，您将用一个数字替换

项

数组。这不是应该发生的事情，首先是

项

仍然应该是一个数字数组

实际上，您需要做的是创建一个不包含要删除的项的新数组。您可以使用以下方法实现此目的：

case DELETE_POST:
    return {
        ...state,
        items: state.items.filter(item => item !== action.payload)
    };

这段代码应该完全符合您的要求：这里我们将为您所在州的

items

属性分配一个全新的数组，其中不包括已删除的帖子

filter

返回一个数组，其中包含指定函数返回的项目

true

。在本例中，我们传递给

filter

的箭头函数为每个与要删除的帖子id不同的项目返回

true

---

通过使用此方法，初始

状态也不会出现问题。由于
filter
返回
Array
的新实例，并且不会改变原始值，因此items

值会以某种方式发生变化

我在这里看到了一些你应该看一看的东西，希望它们能帮助你解决你的问题

首先，请注意，

deletePost

函数需要一个带有post id的参数。但是，在为按钮发布的JSX代码中，您根本没有向函数传递任何值。这意味着在调度操作时，属性

有效负载

将具有一个

未定义的

值

确保更新视图以向其传递id，以便调用正确的端点（您的

DELETE

请求可能指向

https://jsonplaceholder.typicode.com/posts/undefined

现在）并且reducer实际接收到要删除的帖子的id：

<button key={post.id} onClick={()=>this.props.deletePost(post.id)}>X</button>

减缩器应该是纯函数，对于给定的状态和动作，它根据接收到的动作返回一个全新的状态。还要记住，您收到的状态根本无法更改：如果原始实例以任何方式发生了变化，那么您的代码将无法工作

在这种情况下，您需要返回一个新状态，其中您的

items

属性被一个新列表替换，其中您要删除的id丢失。但是，在您编写的代码段中，您将用一个数字替换

项

数组。这不是应该发生的事情，首先是

项

仍然应该是一个数字数组

实际上，您需要做的是创建一个不包含要删除的项的新数组。您可以使用以下方法实现此目的：

case DELETE_POST:
    return {
        ...state,
        items: state.items.filter(item => item !== action.payload)
    };

这段代码应该完全符合您的要求：这里我们将为您所在州的

items

属性分配一个全新的数组，其中不包括已删除的帖子

filter

返回一个数组，其中包含指定函数返回的项目

true

。在本例中，我们传递给

filter

的箭头函数为每个与要删除的帖子id不同的项目返回

true

通过使用此方法，初始

状态也不会出现问题。由于
filter
返回
Array
的新实例，并且不会改变原始值，因此items

值会以某种方式发生变化