Lazy-loading FXProperties异步加载表格单元格更新异常问题咨询

这种快速滚动表格导致部分单元格停留在“Loading..”的问题我太熟悉了！之前做虚拟滚动表格的时候踩过一模一样的坑，核心问题基本都是滚动过程中单元格的可见性变化没被正确捕捉，或者异步请求完成时组件没触发重渲染。下面给你几个针对性的解决方案：

1. 检查虚拟滚动的视图更新逻辑（如果用了虚拟滚动） #

如果你用了react-window、vue-virtual-scroller这类虚拟滚动库，快速滚动时很容易出现组件复用或跳过更新的情况：

• 确认库的可见性回调（比如onVisibleRowsChange）是否正确触发，当单元格重新进入视口时，要手动触发数据加载或强制更新。
• 给每个列表项绑定唯一且稳定的key（比如数据ID，不要用索引），避免组件复用导致状态混乱。比如React里：

  <VirtualizedList
    itemKey={(item) => item.id}
    // ...其他属性
  />
  

2. 独立维护每个单元格的加载状态 #

不要把加载状态放在单元格组件内部，尽量提升到父组件或全局状态中，用单元格的唯一标识做key：

// 示例：Vue中用reactive维护状态
const cellStates = reactive({});

const loadCellData = async (cellId) => {
  cellStates[cellId] = { loading: true };
  const res = await fetch(`/api/data/${cellId}`);
  const data = await res.json();
  cellStates[cellId] = { loading: false, data };
};

这样即使单元格被复用，也能通过cellId准确获取对应的加载状态和数据，不会出现占位符残留。

3. 用IntersectionObserver兜底检查 #

给每个单元格绑定IntersectionObserver，当它进入视口时，强制检查数据状态：

// 示例：React组件中使用
useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const cellId = entry.target.dataset.cellId;
        const state = cellStates[cellId];
        // 如果已经加载了数据但没渲染，强制更新
        if (state && !state.loading && entry.target.textContent.includes('Loading..')) {
          entry.target.textContent = state.data;
        }
        // 如果还没加载，触发加载
        else if (!state?.loading) {
          loadCellData(cellId);
        }
      }
    });
  });

  const cellElement = ref.current;
  if (cellElement) {
    cellElement.dataset.cellId = cellId;
    observer.observe(cellElement);
  }

  return () => observer.disconnect();
}, [cellId, cellStates]);

4. 滚动事件节流优化 #

快速滚动时，滚动事件会高频触发，导致一些更新逻辑被浏览器忽略。给滚动回调加个节流，确保滚动停止后统一检查可见单元格：

import throttle from 'lodash/throttle';

const handleTableScroll = throttle(() => {
  // 获取所有可见的单元格
  const visibleCells = document.querySelectorAll('.table-cell:visible');
  visibleCells.forEach(cell => {
    const cellId = cell.dataset.cellId;
    const state = cellStates[cellId];
    if (state && !state.loading && cell.textContent === 'Loading..') {
      cell.textContent = state.data;
    }
  });
}, 150); // 150ms内只执行一次

// 给表格容器绑定滚动事件
tableContainer.addEventListener('scroll', handleTableScroll);

试试这些方案，大概率能解决你的问题！先从检查虚拟滚动的key和可见性回调开始，这是最常见的原因。

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