Ant Design使用Form.useForm()获取数据域报错

╰半橙微兮° 2023-01-02 07:24 191阅读 0赞

Ant Design框架下在使用Form.useForm()获取数据域出现如下错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 
    
    This could happen for one of the following reasons: 
    
    1. You might have mismatching versions of React and the renderer (such as React DOM) 
    
    2. You might be breaking the Rules of Hooks 
    
    3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70][]

最后反复查看Ant Design文档发现有如下提示：

![在这里插入图片描述][20201007180549579.jpg_pic_center]

我使用的是 class component，因此接下来使用ref获取数据域：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 3][]

经过测试，成功通过ref获取表单数据，并进行重置等操作。

综上所述，在使用class component情况下，应该使用ref方法替代Form.useForm()。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70]: /images/20221120/d48b3230686843818c125a3296a8d230.png
[20201007180549579.jpg_pic_center]: /images/20221120/68575ae6742b4c7bab30c027a1ef5940.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 1]: /images/20221120/c63364a61980407fb90e01a85af3de7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 2]: /images/20221120/f2a2d294494340f79b158c420447aca3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NzM0NTk3_size_16_color_FFFFFF_t_70 3]: /images/20221120/a07672722fbc4583b54cdda1b8775050.png