单击 React.js 中的 bootstrap 模态按钮后如何重新呈现组件

Question

所以我想从我的数据库中删除一个用户，只是为了确认用户的操作，我在模态上显示警告，如果用户单击模态上的删除按钮，将调用删除函数。一切正常，除了一件事，删除后，我的组件没有重新呈现，为此我需要使用 window.location.reload() 导致整个页面重新加载，以显示更新的用户列表，但我不想重新加载整个页面，只想更新特定组件。

这是在使用状态挂钩中调用模式和更新值的按钮

<i
                        data-toggle="modal"
                        data-target="#exampleModal"
                        style={{ cursor: "pointer" }}
                        onClick={() => setDelUser(val.userEmail)}
                        className="fas fa-trash-alt"
                      ></i>

这是模态框上的按钮，它关闭模态框并调用删除函数

<button
                  type="submit"
                  data-dismiss="modal"
                  onClick={handleDelete}
                  type="button"
                  class="btn btn-primary"
                >
                  Delete
                </button>

这里是删除函数

const handleDelete = async () => {
if (delUser === admin) {
  toast.error("Cannot delete the default admin!");
  return;
} else {
  try {
    const result = await Http.post(`${Config.apiUrl}/users/delete`, {
      email: delUser,
    });
    setDelUser("");
  } catch (ex) {
    if (ex.response && ex.response.status === 404) {
      toast.error(ex.response.data);
    }
  }
}

};

Answer 1

首先感谢你给我你的沙盒，我试图修改你的代码，不幸的是我无法检查你的数据因为你的 API 数据来自 localhost，但我修改了数据先变成staticjson，

我修改了你的代码 Here，我建议你使用 Modal React 而不是 Modal pure html，然后在 selected data 被 API 删除后，我使用lodash 从所有数据中删除 selected data，然后数据已删除而没有刷新。

单击 React.js 中的 bootstrap 模态按钮后如何重新呈现组件

How to re-render a component after clicking a bootstrap modal button in React.js

bootstrap-modal

reactjs