删除功能删除错误的项目答案

【问题标题】：Delete function deleting wrong items删除功能删除错误的项目
【发布时间】：2018-07-18 21:10:47
【问题描述】：

我的删除按钮正在工作，但不是以我想要的方式工作。例如，我有 3 个项目，想删除第一个项目。当我单击按钮时，第三项被删除。然后当我再次单击它时，第二个项目被删除。我正在尝试按 id 删除，但它没有这样做。

我正在使用 Redux，所以这是我的操作。

export const deleteBook = (id) => async (dispatch) => {
try {
    const res = await axios.delete(`/profile/books/${id}`);
    dispatch({
        type: GET_PROFILE,
        payload: res.data
    });
} catch (error) {
    dispatch({
        type: GET_ERRORS,
        payload: error.response.data
    });
  }
};

还有我的组件

onDelete = (id) => {
    this.props.deleteBook(id);
};
<button onClick={this.onDelete}>Delete</button>

如果我这样做this.onDelete(book_id)，它会在页面刷新时删除所有内容。

【问题讨论】：

在呈现的代码中，想想id 将包含什么。它肯定不会包含您的图书 ID。如果您改为使用{this.onDelete(book_id)}，它将在每次页面呈现时调用该函数，从而立即删除所有书籍。你需要两者的混合。
Passing id with onClick function React的可能重复

标签： node.js reactjs redux

【解决方案1】：

查看上面的 sn-p 代码，onDelete 函数将接收一个事件对象，而不是您期望的图书 ID。

您需要将代码更新为如下所示：

onDelete = (id) => () => {
    this.props.deleteBook(id);
};
<button onClick={this.onDelete(book_id)}>Delete</button>

此外，当您列出您的图书时，您可能会遇到渲染问题，如果您没有使用 key 属性，react 可能无法判断图书的哪个实例已被删除。

【讨论】：