表格Show Detail按钮点击触发页面重载及MongoDB数据异常求助

问题根源 #

1. 页面刷新、按钮点击事件未触发：按钮默认是submit类型，若表格被<form>标签包裹，点击会触发表单提交直接刷新页面，导致handleRowClick无法执行。
2. 显示“no entries found”：DataTable初始化时机早于后端数据返回，表格初始化时无数据，且数据加载完成后DataTable不会自动同步更新。
3. 状态更新写法错误：setClientTable的函数式更新写法不符合React规范，可能导致数据更新异常。
4. 冗余的window.onload：React的useEffect本身就是组件挂载后执行的钩子，嵌套window.onload会延迟数据请求和表格初始化，加剧时序问题。

一步步修复 #

1. 解决页面刷新问题 #

给按钮添加type="button"属性，明确为普通按钮，避免触发表单提交：

<td><button type="button" onClick={handleRowClick}> show details</button></td>

2. 修正useEffect时序逻辑 #

移除window.onload，确保数据请求完成后再初始化DataTable，同时避免重复初始化：

React.useEffect(() => {
  const fetchClients = async () => {
    try {
      const res = await axios.get("/users");
      // 修正状态更新写法，直接赋值返回数据
      setClientTable(res.data);
      // 数据加载完成后初始化表格
      initDataTable();
    } catch (err) {
      console.error("获取用户数据失败：", err);
    }
  };

  const initDataTable = () => {
    const tableDom = document.getElementById('datatablesSimple');
    // 先销毁已存在的实例，防止重复初始化
    if (window.DataTable && tableDom) {
      window.DataTable.destroy();
    }
    if (tableDom) {
      new DataTable(tableDom);
    }
  };

  fetchClients();
}, []);

3. 修正状态更新错误写法 #

原代码中setClientTable的函数式更新写法冗余且错误，直接改为：

setClientTable(res.data);

4. 可选：支持数据更新后自动刷新表格 #

若后续有数据修改需求，可添加依赖监听clientTable变化，自动重新初始化表格：

React.useEffect(() => {
  const initDataTable = () => {
    const tableDom = document.getElementById('datatablesSimple');
    if (window.DataTable && tableDom) {
      window.DataTable.destroy();
    }
    if (tableDom) {
      new DataTable(tableDom);
    }
  };

  // 数据存在时才初始化表格
  if (clientTable.length > 0) {
    initDataTable();
  }
}, [clientTable]);

额外检查项 #

• 确认表格是否被<form>标签包裹，若有必须保证按钮已添加type="button"。
• 打开浏览器控制台，检查/users接口是否正常返回数据，排查请求报错问题。

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