PrimeReact(v9.3.1) DataTable懒加载实现及问题咨询

问题1：更新数据不触发无限渲染 #

无限渲染的核心原因是状态更新触发了虚拟滚动的重复加载逻辑，同时请求过程中未正确控制加载状态。解决方式：

• 发起请求前标记lazyLoading为true，避免同一时间段内重复触发请求
• 使用函数式更新修改状态，规避闭包导致的旧状态引用问题
• 增加数据判空逻辑，避免空数据触发不必要的状态更新

修正后的fetchRange函数：

const fetchRange = (first: number, last: number) => {
    setLazyLoading(true); // 开始加载时标记状态
    fetch(`/api/questionanswer/slice?first=${first}&last=${last}`)
        .then(response => response.json())
        .then(newData => {
            // 仅当新数据存在时更新状态
            if (newData?.length) {
                setQuestionAnswerValues(prev => [...prev, ...newData]);
            }
            setLazyLoading(false);
        })
        .catch(() => {
            setLazyLoading(false); // 异常时重置加载状态
        });
}

同时调整loadQuestionAnswerLazy过滤无效请求：

const loadQuestionAnswerLazy = (event: any) => {
    const { first, last } = event;
    // 仅当需要加载的范围超出已有数据且未在加载时发起请求
    if (last > questionAnswerValues.length && !lazyLoading) {
        fetchRange(first, last);
    }
}

问题2：正确追加数据到questionAnswerValues #

原写法[...questionAnswerValues, data]的问题是：若接口返回的data是数组类型，会把整个数组作为单个元素插入，导致questionAnswerValues变成嵌套数组，表格无法识别。

正确做法是展开新数据数组，同时用函数式更新获取最新状态：

// 错误：将新数组作为单个元素添加
// data = [...questionAnswerValues, data]

// 正确：展开新数据，合并到原有数组
setQuestionAnswerValues(prev => [...prev, ...newData]);

如果接口返回单个对象，则改为[...prev, newData]，根据实际接口返回格式调整即可。

问题3：追加记录时不隐藏已加载数据 #

PrimeReact DataTable的虚拟滚动懒加载本身就支持保留已加载数据，无需更换组件。之前的问题是数据更新逻辑错误导致表格无法正确渲染已加载内容，修正前两个问题后，追加新数据时已加载记录会正常显示。

若需要备选组件，TanStack Table（原React Table）、MUI X DataGrid也支持懒加载追加数据且保留已有内容，但优先修复当前PrimeReact的实现即可。

内容的提问来源于stack exchange，提问作者Papp Zoltán