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

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
    在这里插入图片描述
    开始我认为是调用方式错误,以下是我的源代码:
    第一种:
    在这里插入图片描述
    第二种:
    在这里插入图片描述

然后我删除掉调用,仅剩下两种定义

// 第一种
const [ ywkcForm ] = Form.useForm();
// 第二种
this.state = {
...
ywkcForm: Form.useForm(),
...
}

但仍然出现相同的错误,最后重复查看adtd文档发现有如下提示:
在这里插入图片描述
我使用的是 class component,因此接下来使用ref获取数据域:
在这里插入图片描述
经过测试,成功通过ref获取表单数据,并进行重置等操作。
综上所述,在使用class component情况下,应该使用ref方法替代Form.useForm。

https://ant.design/components/form-cn/#API

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator['throw'](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === 'function') for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import React, { useContext, useEffect, useRef, useState } from 'react'; import { Button, Form, Input, Popconfirm, Table } from 'antd'; const EditableContext = React.createContext(null); const EditableRow = _a => { var { index } = _a, props = __rest(_a, ['index']); const [form] = Form.useForm(); return ( <Form form={form} component={false}> <EditableContext.Provider value={form}> <tr {...props} /> </EditableContext.Provider> </Form> ); }; const EditableCell = _a => { var { title, editable, children, dataIndex, record, handleSave } = _a, restProps = __rest(_a, ['title', 'editable', 'children', 'dataIndex', 'record', 'handleSave']); const [editing, setEditing] = useState(false); const inputRef = useRef(null); const form = useContext(EditableContext); useEffect(() => { var _a; if (editing) { (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, [editing]); const toggleEdit = () => { setEditing(!editing); form.setFieldsValue({ [dataIndex]: record[dataIndex] }); }; const save = () => __awaiter(void 0, void 0, void 0, function* () { try { const values = yield form.validateFields(); toggleEdit(); handleSave(Object.assign(Object.assign({}, record), values)); } catch (errInfo) { console.log('Save failed:', errInfo); } }); let childNode = children; if (editable) { childNode = editing ? ( <Form.Item style={{ margin: 0 }} name={dataIndex} rules={[{ required: true, message: `${title} is required.` }]} > <Input ref={inputRef} onPressEnter={save} onBlur={save} /> </Form.Item> ) : ( <div className="editable-cell-value-wrap" style={{ paddingInlineEnd: 24 }} onClick={toggleEdit} > {children} </div> ); } return <td {...restProps}>{childNode}</td>; }; const App = () => { const [dataSource, setDataSource] = useState([ { key: '0', name: 'Edward King 0', age: '32', address: 'London, Park Lane no. 0', }, { key: '1', name: 'Edward King 1', age: '32', address: 'London, Park Lane no. 1', }, ]); const [count, setCount] = useState(2); const handleDelete = key => { const newData = dataSource.filter(item => item.key !== key); setDataSource(newData); }; const defaultColumns = [ { title: 'name', dataIndex: 'name', width: '30%', editable: true, }, { title: 'age', dataIndex: 'age', }, { title: 'address', dataIndex: 'address', }, { title: 'operation', dataIndex: 'operation', render: (_, record) => dataSource.length >= 1 ? ( <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}> <a>Delete</a> </Popconfirm> ) : null, }, ]; const handleAdd = () => { const newData = { key: count, name: `Edward King ${count}`, age: '32', address: `London, Park Lane no. ${count}`, }; setDataSource([...dataSource, newData]); setCount(count + 1); }; const handleSave = row => { const newData = [...dataSource]; const index = newData.findIndex(item => row.key === item.key); const item = newData[index]; newData.splice(index, 1, Object.assign(Object.assign({}, item), row)); setDataSource(newData); }; const components = { body: { row: EditableRow, cell: EditableCell, }, }; const columns = defaultColumns.map(col => { if (!col.editable) { return col; } return Object.assign(Object.assign({}, col), { onCell: record => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave, }), }); }); return ( <div> <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}> Add a row </Button> <Table components={components} rowClassName={() => 'editable-row'} bordered dataSource={dataSource} columns={columns} /> </div> ); }; export default App;详细解释每一句
最新发布
07-11
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值