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()中执行，但是如果我们在页面的渲染之前，就进行页面渲染，根据执行机制会无法判断后面是否会有相关页面可以用来加载数据。所以会出现报错。
解决办法：在普通类组件中直接将要进行渲染的数据放进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。