渲染函数中使用async/await报错,遇到类似问题的同学请指教(Vue3.0)

我的需求是这样的:在渲染函数中需要先发起请求,然后再渲染。为了保证逻辑的先后顺序,我采用了async/await方式,但是页面报错。

代码如下

export default defineComponent({
  setup(props, { slots, emit }) {

    const renderColumns = async (columns: Columns) =>  {
     columns.forEach(column => {
       const { hidden, children, translate, ...props } = column;
       let formatter = props.formatter;
       
       if(!formatter && translate) {
         const {
           remoteOptionFn,
           value = 'value',
           key = 'label'
          } = translate;
          await remoteOptionFn();
        }
        // ...
      });
    }

    // ...
    return {};
  },
  async render() {
    return (
      <div>
       <ElTable>
        {await this.renderColumns(this.columns)}
       </ElTable>
      </div>
    );
  }
});

组件的渲染,需要依赖异步请求的数据。最后,我采用了在异步组件上包裹< Suspense>方式解决了这个问题。
代码如下: