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函数需要带有帖子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的新实例，并且不会更改原始实例。

使用React Redux API删除请求删除帖子

1 个答案: