ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

🐛[BUG]ProTable 页面第一次加载时 initialValue 设置不生效 #1446

Closed bluescurry closed 3 years ago

bluescurry commented 3 years ago

🐛 bug 描述

整体页面刷新时,第一次 pro-table 发出的请求并不没有带 initialValue 设置的参数,点击“查询”时 initialValue 才生效

📷 复现步骤

刷新页面,在 network 中查看接口请求

🏞 期望结果

请求:https://proapi.azurewebsites.net/github/issues?current=1&pageSize=5&state=open

💻 复现代码

https://codesandbox.io/s/vigilant-villani-gxtqt?file=/App.tsx flutter-share pro-table

© 版本信息

🚑 其他信息

image

ccloveak commented 3 years ago

你最好能描述下具体的业务场景。。。从我能理解的角度,你是希望页面刷新的时候,表单里带上之前的查询条件?你可以从这方面搜一下之前的issue。

bluescurry commented 3 years ago

你最好能描述下具体的业务场景。。。从我能理解的角度,你是希望页面刷新的时候,表单里带上之前的查询条件?你可以从这方面搜一下之前的issue。

业务场景是打开一个列表页,希望在 initialValues 设置的初始值在进入页面第一次请求列表数据的时候就带着设置的初始值,目前的现象是第一次请求的时候并没有initialValues设置的值。form上是有值的,但是没有带入到请求中 image

{
      title: '服务调用次数',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      initialValue: 3,
      renderText: (val: string) => `${val} 万 `,
    },
bluescurry commented 3 years ago

我理解是不是第一个请求时从 form 中获取数据和 form 设置 initialValues 是异步进行的,有可能在首次请求的时候,form 还没有initialValues完毕,所以获取不到初始的参数

ccloveak commented 3 years ago

问题简化一下

bluescurry commented 3 years ago

问题简化一下

  • 表单的初始值已经赋值了,但是数据并不是根据表单来获取的

需要确认

  • 找后端同学要个实际的接口测试一下。
  • 看你们的项目结构,datasorce是从其他地方处理好了传给protable的,还是protable发request请求获取的。

    • protable的request 的参数不一定跟你后端提供的参数一致

解决方案

  1. 比较理想的是按照正常思维,根据查询表单获取数据,改变查询表单改变查询参数,重新获取数据
  2. 时间紧任务重的话,你根据事先设定的查询条件,手动设置 defaultData

你好,感谢你的问题梳理,不过我觉得你误解我的意思了,我理解这个可能是一个bug,或者是我用法上的问题,你的所答并非我的所问

shuxiaoman commented 3 years ago

同样的问题; 在第一次进入页面,自动执行request,但request的第一个参数params里面没有columns里的initialValues的值

cuihq2005 commented 3 years ago

同样的问题; 在第一次进入页面,自动执行request,但request的第一个参数params里面没有columns里的initialValues的值

同样的问题

cuihq2005 commented 3 years ago

image 2.5.6分支在初始化FormSearch的时候使用了form. initialValues,当前版本不见了,导致自动查询时没有带上initialValues的值,希望能够恢复

chenshuai2144 commented 3 years ago

image

试了一下可以的,你的 initialValues 是不是异步设置上去的?

cuihq2005 commented 3 years ago
<ProTable
        actionRef={actionRef}
        rowKey={(r) => r.id}
        loading={loading}
        search={{ span: defaultSearchColConfig, optionRender: defaultOptionRender }}
        request={(params) => queryVsmsTpl(params)}
        columnEmptyText=""
        columns={columns}
        rowSelection={false}
        toolBarRender={() => [
          <Button key="new" type="primary" onClick={onCreate}>
            <PlusOutlined /> 新建
          </Button>,
        ]}
        tableAlertRender={false}
        form={{ initialValues: { status: ['0', '1'] } }}
      />

其中使用 form={{ initialValues: { status: ['0', '1'] } }}为form设置初始值。赋值后打开页面的第一次查询无法将initialValues发送到后端,点击查询按钮可以

从ProTable的代码里看,formSearch初始为空,

  const [formSearch, setFormSearch] = useMountMergeState<Record<string, unknown> | undefined>(
    undefined,
  );

在为action赋值,发起第一次查询的时候formSearch没有被赋值,所以不会把initialValues带到后端,我不清楚您的参数是怎么带上去的

const action = useFetchData(...)

这个功能以前是ok的,我看2.5.6分支的代码,初始化formSearch的时候使用了form.initialValues

  const [formSearch, setFormSearch] = useState<{}>(() => rest.form?.initialValues);

上诉请参考

chenshuai2144 commented 3 years ago

来个重现的代码吧,useState<{}>(() => rest.form?.initialValues); 这个数据没经过转化,所以我在初始化的时候执行了一次 submit

bluescurry commented 3 years ago

来个重现的代码吧,useState<{}>(() => rest.form?.initialValues); 这个数据没经过转化,所以我在初始化的时候执行了一次 submit

https://codesandbox.io/s/vigilant-villani-gxtqt?file=/App.tsx 把打开network,然后刷新一下页面,第一次的请求接口没有带着初始参数,很好复现的

cuihq2005 commented 3 years ago

https://codesandbox.io/s/busy-edison-ypofx?file=/App.tsx 刷新页面,第一次没有(刷新页面太慢了,我删了一个item,强制刷新的) image 点击查询按钮的查询可以 image

bluescurry commented 3 years ago

https://codesandbox.io/s/busy-edison-ypofx?file=/App.tsx 刷新页面,第一次没有(刷新页面太慢了,我删了一个item,强制刷新的) image 点击查询按钮的查询可以 image

热更新是没问题的,问题就是在第一次渲染pro-table的时候,可以在本地创建一个空项目试试。。。

chenshuai2144 commented 3 years ago

试试这个,延迟了一下submit 的时间

https://github.com/ant-design/pro-components/pull/1466

cheer001 commented 3 years ago

试试这个,延迟了一下submit 的时间

1466

image 还是获取不到protable的表单初始化值

chenshuai2144 commented 3 years ago

你这个太奇怪了,是不是没写 name 之类的

bluescurry commented 3 years ago

试试这个,延迟了一下submit 的时间

1466

我这边更新pro-table的包试了下,没问题了,看了下源码,是 submit 触发时机那块做了修改是吗

bluescurry commented 3 years ago

试试这个,延迟了一下submit 的时间

1466

image 还是获取不到protable的表单初始化值

你把pro-table版本更新到最新的2.19.0了吗,我试了下,问题是好了的

cheer001 commented 3 years ago

试试这个,延迟了一下submit 的时间

1466

image 还是获取不到protable的表单初始化值

你把pro-table版本更新到最新的2.19.0了吗,我试了下,问题是好了的

升级到这个版本了,还是会出现获取不到初始化值的问题

bluescurry commented 3 years ago

你这个太奇怪了,是不是没写 name 之类的

手动触发submit是可以拿到表单初始化值的 image

能贴一些关键代码吗,我是把一些 pro-components 的包一起升级的,不知道是否会有影响

yarn upgrade @ant-design/pro-form @ant-design/pro-table
cheer001 commented 3 years ago

@ant-design/pro-form

我升级一下proform看下

bluescurry commented 3 years ago

@ant-design/pro-form

我升级一下proform看下

请问你那问题解决了吗,解决了的话我就把issue close了