Vue 3加载API数据到ag-grid-vue时出现TypeError报错的求助

错误原因 #

你直接把jokeRepository.getRecordList()返回的Promise对象赋值给了rowData，但ag-grid需要的是数组类型的数据源。Promise是异步操作的占位对象，本身没有map方法，所以网格渲染时会抛出TypeError。

解决方案 #

把异步数据请求放在组件生命周期钩子（比如created）里，等数据返回后再赋值给rowData，同时初始化rowData为空数组避免初始渲染报错。

方法一：使用async/await（更简洁）

<script>
import { AgGridVue } from "ag-grid-vue3";
import Repository from "../serviceFactory/serviceFactory";
const jokeRepository = Repository.get("JokeRepo");

export default{
  name: "App",
  components: {
    AgGridVue,
  },
  data() {
    return {
      columnDefs: [
        { headerName: "Joke", field: "joke", sortable: true}
      ],
      rowData: [], // 初始化为空数组
      overlayNoRowsTemplate: "No Record Found!"
    };
 },
 async created() {
   // 组件创建后异步拉取数据
   const res = await jokeRepository.getRecordList();
   this.rowData = res; // 数据返回后更新rowData，ag-grid会自动渲染
 }
}
</script>

方法二：使用.then回调

<script>
import { AgGridVue } from "ag-grid-vue3";
import Repository from "../serviceFactory/serviceFactory";
const jokeRepository = Repository.get("JokeRepo");

export default{
  name: "App",
  components: {
    AgGridVue,
  },
  data() {
    return {
      columnDefs: [
        { headerName: "Joke", field: "joke", sortable: true}
      ],
      rowData: [],
      overlayNoRowsTemplate: "No Record Found!"
    };
 },
 created() {
   jokeRepository.getRecordList()
     .then(res => {
       this.rowData = res;
     })
     .catch(err => {
       // 可选：处理请求失败的情况
       console.error('数据加载失败:', err);
     });
 }
}
</script>

额外注意 #

• 确认jokeRepository.getRecordList()返回的res是数组类型，如果接口返回的是包含数据的对象（比如{ data: [...] }），需要改成this.rowData = res.data
• 初始空数组会触发你设置的overlayNoRowsTemplate提示，直到数据加载完成

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