baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.11k stars 2.48k forks source link

page的initApi响应慢的情况,crud的colums初始渲染获取不到initApi的响应数据 #10198

Closed thinkingc closed 4 months ago

thinkingc commented 4 months ago

描述问题:

page的initApi响应慢的情况,crud的colums初始渲染获取不到initApi的响应数据

截图或视频:

image image

initApi响应后,cell获取不到值,但table可以获取到 image image

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? npm

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在 6.3.0存在

  3. 粘贴有问题的完整 amis schema 代码:

    {
    "type": "page",
    "initApi": "https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/page/initData?waitSeconds=10",
    "body": {
    "type": "crud",
    "api": "https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/sample",
    "syncLocation": false,
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "engine",
        "label": "Rendering engine",
        "type": "tpl",
        "tpl": "${date}",
        "trackExpression": "${date}"
      }
    ]
    }
    }
  4. 操作步骤 page的initApi设置waitSeconds值大些,当其响应后,engine 列无法渲染出来。翻页就能看到数据,说明initApi响应后Cell组件未重新渲染。

2betop commented 4 months ago

https://aisuda.bce.baidu.com/amis/zh-CN/docs/types/api#%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0 利用这个特点,让 crud 的 api 在 initApi 之后请求

thinkingc commented 4 months ago

https://aisuda.bce.baidu.com/amis/zh-CN/docs/types/api#%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0 利用这个特点,让 crud 的 api 在 initApi 之后请求

"trackExpression": "${date}" 在这个地方无效的情况后面会修复吗

2betop commented 4 months ago

crud 的 api 配置 sendOn

thinkingc commented 4 months ago

crud 的 api 配置 sendOn

这个可以的,只是想用另一用实现方式,类似 #7152 这个issue的解法 ,通过trackExpression自动追踪变化。

2betop commented 4 months ago

看样子这样也可以, trackExpression 配置在 crud 上,然后列配置可访问上层数据

export default {
  type: 'page',
  initApi:
    'https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/page/initData?waitSeconds=10',
  body: {
    type: 'crud',
    api: 'https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/sample',
    syncLocation: false,
    trackExpression: '${date}',
    columns: [
      {
        name: 'id',
        label: 'ID'
      },
      {
        name: 'date',
        label: 'Rendering engine',
        type: 'tpl',
        tpl: '${date}',
        canAccessSuperData: true
      }
    ]
  }
};