params: [{ editData: data.data }]
})
},
(2)在page页的Container中添加初始化调用的函数
const init = useCallback(() => {
dispatch(‘container/init’)
}, [dispatch])
useEffect(() => {
init()
}, [dispatch, init])
(3)【数据回显】在page页面通过function Container({ dispatch, form, container: { editData } }: any) 将container中的editData拿到,因此可以放在表单里的initialValue。
<Form.Item label=“用户名”>
{getFieldDecorator(‘name’, {
initialValue: (editData && editData.name) || ‘’
})()}
</Form.Item>
至此就完成了页面初始化,可以看到数据显示了。
6. 保存功能的实现
(1)在model页面写update接口,接口为manage/ucenter/updateUserInfo,返回数据为a
update: async ({ params: [remoteValue] }, { dispatch }) => {
let a = await dispatch({
type: ‘container/post’,
params: [‘manage/ucenter/updateUserInfo’, remoteValue]
})
return a
}
(2)在保存按钮上添加点击事件onClick={onSave}并在page页面写onSave方法。其中fieldValue里面保存着form表单验证的数据对象,因此可以取到对应input的值。
const onSave = useCallback(() => {
const { validateFields } = form
validateFields((err: any, fieldValue: any) => {
if (err) return
let res = {
mobile: fieldValue.mobile,
email: fieldValue.email
}
dispatch({
type: ‘container/update’,
params: [res]
}).then((v: any) => {
console.log(v)
if (v.code === 200) {
message.success(‘保存成功’)
init()
} else {
message.error(v.message)
}
})
})
}, [dispatch, form, init])
至此可以实现保存功能。
7. 表单验证
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 - 健人雄 - 博客园
getFieldDecorator是一个方法,这