Question

我的删除按钮正在工作，但不是我想要的那样。例如，我有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)，则会在页面刷新时删除所有内容。

Answer 1

看看上面的代码片段，onDelete函数将接收一个事件对象，而不是您期望的书号。

您需要将代码更新为以下形式：

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

另外，在列出书籍时，您可能会遇到渲染问题，如果您没有使用key道具反应，可能无法告诉您该书籍的哪个实例已被删除。

删除功能删除错误的项目

1 个答案: