删除功能删除错误的项目

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

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

您需要将代码更新为以下内容：

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

此外，当您列出书籍时，您可能会遇到渲染问题，如果您没有使用过key道具，则可能无法判断该书的哪个实例已被删除。

删除功能删除错误的项目

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

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

您需要将代码更新为以下内容：

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

此外，当您列出书籍时，您可能会遇到渲染问题，如果您没有使用过key道具，则可能无法判断该书的哪个实例已被删除。