javascript - naive ui 表格renderExpand中调用接口时无限重复调用的问题？

Question

第一次接触naive ui， 使用table 中的 renderExpand 属性时，在属性中调用接口请求数据，如果数据定义为响应式，那么接口会无限重复请求，如果不定义为响应式，只会调用一次，但是无法渲染拿到的数据，我该怎么修改呢？

{    type: 'expand',    renderExpand: rowData => {        const columns = [         ...        ]        const tableData = ref([])        // 自动重复调用接口        getTableData().then(          // 赋值          tableData = ...        )        return h(            NDatatable,            {                columns,                data: tableData.value // 重复渲染导致重复调用            },            null        )    }}

Answer 1

{  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    )  }}