dbfu / antd-pro-keepalive-tabs

基于antd pro5实现的多页签功能
https://dbfu.github.io/antd-pro-keepalive-tabs/
MIT License
55 stars 19 forks source link

useKeepAliveTabs页面activeTabRoutePath数据未同步 #5

Open TangDeYu opened 3 months ago

TangDeYu commented 3 months ago
image

当多签页 连续关闭当前页的时候 activeTabRoutePath字段不会实时同步 获取到的还是之前两次的path。到时候页面不会渲染后最后一条数据上

如果页面重新刷新则不会出现这个问题

把所有的标签页关闭后。 重新打开多条多签页。关闭当前就会出现。很奇怪。

closeTab useCallback内的activeTabRoutePath 和 函数外的activeTabRoutePath不为一致。

dbfu commented 3 months ago

image 当多签页 连续关闭当前页的时候 activeTabRoutePath字段不会实时同步 获取到的还是之前两次的path。到时候页面不会渲染后最后一条数据上 如果页面重新刷新则不会出现这个问题

把所有的标签页关闭后。 重新打开多条多签页。关闭当前就会出现。很奇怪。

closeTab useCallback内的activeTabRoutePath 和 函数外的activeTabRoutePath不为一致。

可以给一个能复线的demo吗?

TangDeYu commented 3 months ago

https://github.com/dbfu/antd-pro-keepalive-tabs/assets/52319042/e5b12407-9ba8-4b64-8b28-159c9bb20761

这是目前的表现

TangDeYu commented 3 months ago

// 关闭tab const closeTab = useCallback( (routePath = activeTabRoutePath) => { const index = keepAliveTabs.findIndex((o) => o.routePath === routePath); if (keepAliveTabs[index].routePath === activeTabRoutePath) { if (index > 0) { history.push(keepAliveTabs[index - 1].routePath); } else { history.push(keepAliveTabs[index + 1].routePath); } } keepAliveTabs.splice(index, 1);

  delete keepAliveHiddenEvents.current[routePath];
  delete keepAliveShowEvents.current[routePath];

  setKeepAliveTabs([...keepAliveTabs]);
},
[activeTabRoutePath],

);

代码就是这些。activeTabRoutePath函数里面不同步。没有获取到最新的path导致的 这个if()后的else 应该是要特殊处理吧

dbfu commented 3 months ago

// 关闭tab const closeTab = useCallback( (routePath = activeTabRoutePath) => { const index = keepAliveTabs.findIndex((o) => o.routePath === routePath); if (keepAliveTabs[index].routePath === activeTabRoutePath) { if (index > 0) { history.push(keepAliveTabs[index - 1].routePath); } else { history.push(keepAliveTabs[index + 1].routePath); } } keepAliveTabs.splice(index, 1);

  delete keepAliveHiddenEvents.current[routePath];
  delete keepAliveShowEvents.current[routePath];

  setKeepAliveTabs([...keepAliveTabs]);
},
[activeTabRoutePath],

);

代码就是这些。activeTabRoutePath函数里面不同步。没有获取到最新的path导致的 这个if()后的else 应该是要特殊处理吧

好的 我看一下

TangDeYu commented 3 months ago

// 关闭tab const closeTab = useCallback( (routePath = activeTabRoutePath) => { const index = keepAliveTabs.findIndex((o) => o.routePath === routePath); if (keepAliveTabs[index].routePath === activeTabRoutePath) { if (index > 0) { history.push(keepAliveTabs[index - 1].routePath); } else { history.push(keepAliveTabs[index + 1].routePath); } } keepAliveTabs.splice(index, 1);

  delete keepAliveHiddenEvents.current[routePath];
  delete keepAliveShowEvents.current[routePath];

  setKeepAliveTabs([...keepAliveTabs]);
},
[activeTabRoutePath],

); 代码就是这些。activeTabRoutePath函数里面不同步。没有获取到最新的path导致的 这个if()后的else 应该是要特殊处理吧

好的 我看一下

如果页面上已经有 多个标签页的情况下。 刷新下页面。然后按照我上面的操作是没有问题的 把标签页全部关闭剩下最后一个只会。 继续添加多个标签页 不刷新页面 就会必现这个问题