renderFormItem多执行导致fieldProps属性不正常🐛[BUG]

America-first-melon commented 3 years ago

🐛 bug 描述

动态获取筛选select的数据，为什么renderFormItem里执行会把fieldProps给重置掉？

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

ProTable 2.8.0
Antd 4.7
umi 版本
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

chenshuai2144 commented 3 years ago

@merica-first-melon 可以先试试用 request 获取一下。

America-first-melon commented 3 years ago

我看 renderFormItem 里面第二个参数里面有个request，但是不知道在哪用

chenshuai2144 commented 3 years ago

@America-first-melon 看起来是时机的问题，你可以这样使用

 {  
   title: '状态',
    dataIndex: 'state',
    request: async () => [
      {
        label: 'qixian',
        value: 'qixian',
      },
    ],
    initialValue: 'open',
    filters: true,
}

kiwikaki commented 3 years ago

@chenshuai2144 request可以解决界面问题，但是request 存在多次执行问题，搜索框收起和展开时也会调用。这样多次请求服务器终归不是很好

chenshuai2144 commented 3 years ago

我来修一下！减少下请求

America-first-melon commented 3 years ago

我来修一下！减少下请求

0 error , 0 warning .jpg

binvb commented 3 years ago

@America-first-melon 看起来是时机的问题，你可以这样使用

 {  
   title: '状态',
    dataIndex: 'state',
    request: async () => [
      {
        label: 'qixian',
        value: 'qixian',
      },
    ],
    initialValue: 'open',
    filters: true,
}

request取到的数据，在renderFormItem可以读取到吗？具体是哪个字段，看了里面三个字段好像都没有包含在里面

niufen0420 commented 3 years ago

@chenshuai2144 能不能贴出完整的使用方式。renderFormItem 怎么拿去asyc request的数据

niufen0420 commented 3 years ago

@America-first-melon 看起来是时机的问题，你可以这样使用
 {  
   title: '状态',
    dataIndex: 'state',
    request: async () => [
      {
        label: 'qixian',
        value: 'qixian',
      },
    ],
    initialValue: 'open',
    filters: true,
}
request取到的数据，在renderFormItem可以读取到吗？具体是哪个字段，看了里面三个字段好像都没有包含在里面

求助，你解决这个问题了吗

binvb commented 3 years ago

@America-first-melon 看起来是时机的问题，你可以这样使用
 {  
   title: '状态',
    dataIndex: 'state',
    request: async () => [
      {
        label: 'qixian',
        value: 'qixian',
      },
    ],
    initialValue: 'open',
    filters: true,
}
request取到的数据，在renderFormItem可以读取到吗？具体是哪个字段，看了里面三个字段好像都没有包含在里面
求助，你解决这个问题了吗

没找到解决方案，自己写了个form，你新建个问题的issue给开发者看看吧，好像很少回复下面的评论的。

kiwikaki commented 3 years ago

` //模拟网络请求 const requestEnum = async () => { const temp = [ { id: 'a', name: 'a' }, { id: 'b', name: 'b' }, { id: 'c', name: 'c' }, { id: 'd', name: 'd' }, ]; return temp.map((v) => { return { value: v.id, label: v.name }; }); };

const columns = [ { title: '规则名称', dataIndex: 'name', tip: '规则名称是唯一的 key', formItemProps: { rules: [ { required: true, message: '规则名称为必填项', }, ], }, render: (dom, entity) => { return <a onClick={() => setRow(entity)}>{dom}; }, }, { title: '描述', dataIndex: 'desc', valueType: 'textarea', }, { title: '服务调用次数', dataIndex: 'callNo', sorter: true, hideInForm: true, renderText: (val) => ${val} 万, }, { title: '状态', dataIndex: 'status', hideInForm: true, valueEnum: { 0: { text: '关闭', status: 'Default', }, 1: { text: '运行中', status: 'Processing', }, 2: { text: '已上线', status: 'Success', }, 3: { text: '异常', status: 'Error', }, }, }, { title: '上次调度时间', dataIndex: 'updatedAt', hideInTable: true, hideInForm: true, dataType: 'select', request: requestEnum, //调用网络请求 }, ];`

binvb commented 3 years ago

` //模拟网络请求 const requestEnum = async () => { const temp = [ { id: 'a', name: 'a' }, { id: 'b', name: 'b' }, { id: 'c', name: 'c' }, { id: 'd', name: 'd' }, ]; return temp.map((v) => { return { value: v.id, label: v.name }; }); };

const columns = [ { title: '规则名称', dataIndex: 'name', tip: '规则名称是唯一的 key', formItemProps: { rules: [ { required: true, message: '规则名称为必填项', }, ], }, render: (dom, entity) => { return <a onClick={() => setRow(entity)}>{dom}; }, }, { title: '描述', dataIndex: 'desc', valueType: 'textarea', }, { title: '服务调用次数', dataIndex: 'callNo', sorter: true, hideInForm: true, renderText: (val) => ${val} 万, }, { title: '状态', dataIndex: 'status', hideInForm: true, valueEnum: { 0: { text: '关闭', status: 'Default', }, 1: { text: '运行中', status: 'Processing', }, 2: { text: '已上线', status: 'Success', }, 3: { text: '异常', status: 'Error', }, }, }, { title: '上次调度时间', dataIndex: 'updatedAt', hideInTable: true, hideInForm: true, dataType: 'select', request: requestEnum, //调用网络请求 }, ];`

估计是不同版本，我现在看用的最新的2.9.11，连column里面连dataType这个属性都没有了，更加不会request返回的内容也不会自动填入

kiwikaki commented 3 years ago

@binvb "@ant-design/pro-table": "2.9.3", 2.9.3以前的protable renderFormItem 没有问题，可以暂时推到这个版本。这个bug好像还没修复

chenshuai2144 commented 3 years ago

ref in https://github.com/ant-design/pro-components/pull/842

chenshuai2144 commented 3 years ago

@America-first-melon 终于修好了

chenshuai2144 commented 3 years ago

可以使用这种方式来进行开发

const MyCom = (value,onChange)=> <Cascader />

renderFormItem = ()=><MyCom/>

niufen0420 commented 3 years ago

可以使用这种方式来进行开发
const MyCom = (value,onChange)=> <Cascader />

renderFormItem = ()=><MyCom/>

从服务器获取有结果，最后还是空的

xgj1988 commented 3 years ago

这个问题解决了。。谁@ 我一下。。。把版本号给我说一下。

xgj1988 commented 3 years ago

我来修一下！减少下请求

@chenshuai2144 是不是你改了之后，现在直接重复渲染是空哦。

...
  useEffect(() => {
    dispatch({
      type: 'permission/fetch',
      callback: (response) => {
        if (response.success) {
          changeState({ menuList: utils.generateTreeData(response.menuList) })
        }
      }
    });
  }, [])

....

 /**
   * 列
   */
  const columns = [
    {
      title: '所属菜单',
      dataIndex: ['menu', 'name'],
      search: "menuId",
      renderFormItem: () => {
        return (
          <TreeSelect
            allowClear
            showSearch
            treeNodeFilterProp="title"
            treeData={menuList}
          />
        );
      },
    }]
......

yayapao commented 3 years ago

可以使用这种方式来进行开发
const MyCom = (value,onChange)=> <Cascader />

renderFormItem = ()=><MyCom/>

这样子, 如果 options 是使用的 state, 并不能够被触发, 这个方向没有解决问题...

chenshuai2144 commented 3 years ago

看这个文档 https://procomponents.ant.design/components/field#%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE

kiwikaki commented 3 years ago

看这个文档 https://procomponents.ant.design/components/field#%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE

基于 https://procomponents.ant.design/components/field/ 提供的api ,在最新版本使用renderFormItem fieldProps.options 默认第一次还是加载为空，应该是加载时机问题。 useEffect(() => { setTimeout(() => { requestEnum(); }, 800); }, []); 暂时在useEffect 做个延迟进行处理，两中方式都可以解决空值问题。

America-first-melon commented 3 years ago

我刚刚试用table2.10 加 request :async() =>[] 可以用，只打印一次

lirl-cn commented 1 year ago

好奇为什么renderFormItem里的组件，在收起和打开的时候会被重载

ant-design / pro-components