使用 React Redux api 删除请求删除 post

Question

当我控制台日志 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>```

Answer 1

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

首先，请注意，您的 deletePost 函数需要一个具有 post ID 的参数。但是，在您为按钮 post 编辑的 JSX 代码中，您根本没有向函数传递任何值。这意味着属性 payload 将在调度操作时具有 undefined 值。

确保更新您的视图以向其传递一个 id，这样您就可以调用正确的端点（您的 DELETE 请求现在可能指向 https://jsonplaceholder.typicode.com/posts/undefined）并且 reducer 实际接收到该 id您要删除的 post 个：

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

你必须检查的第二件事是减速器的实现。根据我在您的消息和 deletePost 方法的代码中的理解，action.payload 应该包含一个数字。

既然如此，你的 reducer 如何处理 reducer 中的 DELETE_POST 动作对我来说意义不大。

case DELETE_POST:
    return {
        ...state,
        items: action.payload
    };

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

在这种情况下，您需要 return 一个新状态，其中您的 items 属性被一个新列表替换，其中缺少您要删除的 ID。但是，在您编写的代码段中，您将 items 数组替换为数字 。这不是应该发生的事情，首先 items 应该仍然是一个数字数组。

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

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

这段代码应该完全符合您的要求：这里我们为您所在州的 items 属性分配一个全新的数组，其中不包括已删除的 post。

filter returns 一个数组，其中包含指定函数 returns true 的项目。在这种情况下，我们传递给 filter returns true 的箭头函数用于每个与要删除的 post 的 id 不同的项目。

通过使用此方法，初始 state.items 值以某种方式发生突变也不会出现问题，因为 filter return 是 Array 的新实例并且确实不改原件。

使用 React Redux api 删除请求删除 post

Deleting post with React Redux api delete request

api

fetch

thunk

reactjs

redux