时间戳

首页 > 解决方案 > 单击 React.js 中的引导模式按钮后如何重新渲染组件

reactjs - 单击 React.js 中的引导模式按钮后如何重新渲染组件

问题描述

所以我想从我的数据库中删除一个用户，只是为了确认用户的操作，我在模态上显示一个警告，如果用户单击模态上的删除按钮，将调用删除函数。一切都很好，除了一件事，删除后，我的组件没有重新渲染，为此我需要使用 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);
    }
  }
}

};

标签： reactjsbootstrap-modal

解决方案

首先感谢你给我你的沙箱，我试图修改你的代码，不幸的是我无法检查你的数据，因为你的 API 数据来自localhost，但我static先将数据修改为 json，

我修改了您的代码在这里，我建议您使用 Modal React 而不是 Modal 纯 html，然后在selected data通过 API 删除后，我使用从所有数据lodash中删除selected data，然后数据已被删除而不刷新。

推荐阅读