Ant Design Pro V5 学习分享(长期更新)

1、以数组的形式获取表单中同一行两个input数值,可将Form.Item的字段名写为数组形式,表格提交之后的数据就可以数组形式呈现,方便传递后台取值。

<Form.Item
  name={['position', 'position_x']}
  rules={} />
<Form.Item
  name={['position', 'position_y']}
  rules={} />

在这里插入图片描述
2、Form表单的清空重置可直接使用下面代码,一键清空。

form.resetFields();

3、高级表单ProTable的actionRef,帮助我们可以手动进行table页面的刷新,刷新并清空,重置,清空选择

const actionRef = useRef<ActionType>();//Type里面包含刷新,刷新并清空,重置,清空选择四类可选操作
<ProTable actionRef={actionRef} />;
actionRef .current.reload();// 刷新
actionRef .current.reloadAndRest();// 刷新并清空,页码也会重置
actionRef .current.reset();// 重置到默认值
actionRef .current.clearSelected();// 清空选中项

4、在Modal中调用Form的时候,控制台会报下面这个错误:
Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?(警告:useForm创建的实例未连接到任何Form元素。忘记通过表格的属性)
Ant Desgin给的解释是:因为你在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染。在Modal中加入forceRender,进行预渲染后错误消失
在这里插入图片描述
5、Form表单设定表单值的时候form.setFieldsValue(value);,控制台报错:
在这里插入图片描述
Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.(警告:在现有状态转换期间(例如在渲染期间)无法更新。渲染方法应该纯粹是props和state的函数。)
原因分析:根据react的执行流程,数据在加载的时候,都在componentDidMount()中执行,但是如果我们在页面的渲染之前,就进行页面渲染,根据执行机制会无法判断后面是否会有相关页面可以用来加载数据。所以会出现报错。Ant Design Pro V5 学习分享(长期更新)_第1张图片
解决办法:在普通类组件中直接将要进行渲染的数据放进componentDidMount()里即可;在函数组件中,可用hooks中的useEffect,在页面渲染之后代替componentDidMount(),再将数据渲染进去。

6、React常见的一个错误警告,就是在进行遍历的时候,要有唯一的key值。
在这里插入图片描述

Warning: Each child in a list should have a unique “key” prop.(警告数组遍历子元素要有一个唯一的key值)
查看Ant Design的Table组件的API,有个专属的rowkey进行设置表格行的key。所以只要添加rowkey即可解决这个警告

在这里插入图片描述
7、 关于Ts的一个小问题:

const token = localStorage.getItem('token');

不能将类型“string | null”分配给类型“string”。不能将类型“null”分配给类型“string”。
解决办法:const token = localStorage.getItem('token') || '';

8、实现定时刷新页面从后台获取数据。当时一直无法清除掉定时器timer,就很疑惑。
解决办法: 就是是将定时器定义到函数组件之外,防止每次状态改变,组件重新render,导致timer又重新进行定义,从而无法清除定时器。函数组件中的一个状态position改变了,一般情况下setState() 总是触发一次重绘,除非在shouldComponentUpdate() 中实现了条件渲染逻辑。

let timer: any;	//定义到函数组件之外
const TableList: RC<{}> = () => {
  useEffect(() => {
    time();
    if (position === 'auto') {
      timer = setInterval(time, 2000);
    }
    if (position === 'manual') {
      clearInterval(timer);
    }
  }, [position])
}

9、setState之后无法立即获取改变的状态值。
解决办法:`可以配合useEffect一起使用,根据状态值的及时变化,立即做出响应。

10、Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
问题原因:浏览器请求一次之后,服务器却返回两次及两次以上的响应。主要是出现在我在mock中模拟后台数据的时候,根据token解密出来的username来判断应该返回哪一个用户信息,用的是switch case,特别杀,忘了写break,导致响应后服务器没有立刻结束,于是报了这个错。
解决办法:加上break。

你可能感兴趣的:(Antd,Pro,ant,reactjs,前端)