在使用naive ui表格组件时，如何避免renderexpand中接口无限重复调用？
许多开发者在使用Naive UI的renderExpand属性展开表格行时，会遇到一个棘手的问题：当在renderExpand中调用接口请求数据并使用响应式数据时，接口会无限重复调用。这主要是因为响应式数据的变化会触发组件重新渲染，从而再次调用renderExpand，形成一个死循环。如果不使用响应式数据，虽然接口只会调用一次，但数据却无法正确渲染到展开的表格中。
本文将详细解释这个问题产生的原因，并提供解决方案。问题代码片段如下：
{ type: 'expand', renderExpand: rowData => { const columns = [ ... ] const tableData = ref([]) // 自动重复调用接口 getTableData().then( // 赋值 tableData = ... ) return h( NDatatable, { columns, data: tableData.value // 重复渲染导致重复调用 }, null ) } }
代码中，tableData 为响应式数据，getTableData() 方法每次渲染都会被调用，导致接口无限请求。而如果 tableData 不是响应式数据，则接口只调用一次，但由于数据无法被 vue 框架追踪，所以无法更新视图，导致数据无法渲染。
解决方法是利用watchEffect来控制接口的调用时机，并结合缓存机制来避免重复请求。改进后的代码如下：
{ type: 'expand', renderExpand: rowData => { const tableData = ref([]) // 用 watchEffect watchEffect(() => { if (shouldCallApi(rowData)) { // 更新 tableData getTableData(rowData).then(data => { tableData.value = data }) } else { // 用缓存数据 tableData.value = getCachedResult(rowData) } }) const columns = [ // ... ] return h( NDatatable, { columns, data: tableData.value }, null ) } }
在这个改进后的版本中，我们使用了 watchEffect。它会在 rowData 发生变化时执行，但只会在第一次以及 shouldCallApi(rowData) 返回 true 时调用接口。 shouldCallApi 函数用于控制是否需要调用接口，例如可以根据 rowData 是否已缓存来判断。 getCachedResult 函数用于从缓存中获取数据。这样就避免了接口的无限重复调用，同时保证了数据的正确渲染。 通过这种方式，既能保证数据实时更新，又能避免不必要的接口请求，提升了应用的性能和效率。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
