【React入门实践】结合Ant-Design从0带你手把手开发【个人中心-信息修改】页面

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是一个方法，这