React.js中点击Bootstrap模态框按钮后如何实现组件重新渲染

问题根因 #

你调用删除接口成功后仅修改了delUser变量，并没有更新渲染用户列表所依赖的State，React检测不到列表数据源的变化，自然不会触发组件重渲染。

解决方案 #

假设你渲染用户列表的State声明为（实际项目中变量名可能不同，自行替换即可）：

const [userList, setUserList] = useState([]);

你可以二选一以下方案修改handleDelete函数：

方案1：本地过滤更新（性能最优，无需额外发请求）

删除接口调用成功后，直接从现有列表中过滤掉已删除的用户，更新列表State即可：

const handleDelete = async () => {
  if (delUser === admin) {
    toast.error("Cannot delete the default admin!");
    return;
  } else {
    try {
      await Http.post(`${Config.apiUrl}/users/delete`, {
        email: delUser,
      });
      // 新增：过滤掉已删除的用户，更新列表State
      setUserList(prevList => prevList.filter(user => user.userEmail !== delUser))
      setDelUser("");
      toast.success("用户删除成功")
    } catch (ex) {
      if (ex.response && ex.response.status === 404) {
        toast.error(ex.response.data);
      }
    }
  }
};

方案2：重新拉取最新用户列表（适合数据需要实时同步多端修改的场景）

如果你页面初始化时是调用getUserList这类接口获取用户列表的，删除成功后重新调用一次该方法更新列表即可：

// 替换为你项目中实际拉取用户列表的方法
const getUserList = async () => {
  const res = await Http.get(`${Config.apiUrl}/users/list`)
  setUserList(res.data)
}

const handleDelete = async () => {
  if (delUser === admin) {
    toast.error("Cannot delete the default admin!");
    return;
  } else {
    try {
      await Http.post(`${Config.apiUrl}/users/delete`, {
        email: delUser,
      });
      // 新增：重新拉取最新列表
      await getUserList()
      setDelUser("");
      toast.success("用户删除成功")
    } catch (ex) {
      if (ex.response && ex.response.status === 404) {
        toast.error(ex.response.data);
      }
    }
  }
};

补充说明 #

两种方案都不需要全页刷新，只要列表State更新，React会自动帮你重渲染列表对应的DOM部分。

内容的提问来源于stack exchange，提问作者Saadi