第八课：表单提交

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/eg238b

本节代码
ca08b1d?branch=ca08b1d8645e0c0f09e3467165ffc450b421d96f&diff=split

请发与本节课有关的讨论。

[ZHUIMEN]

#r48949082

[ycd12345]

如果需要权限验证需要怎么定义useRequest呢？比如header里加token。直接加 headers:{token:"XXXXXX"}会被认为是跨域访问（不写headers就没问题）。
如何在不影响请求headers的前提下，添加自定义header?

[aspirantzhang]

1. 肯定是加在useRequest的header里，由于antdpro的useRequest用的是umi-request，所以具体的header添加方法可以参考：
   https://github.com/umijs/umi-request
2. token一般可能加在Authorization这个配置里，参考：
   https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization
   https://swagger.io/docs/specification/authentication/bearer-authentication/
3. 跨域只需要前端按正常方法处理，能捕捉到头部成功发送即可。到服务器那边接不到，是服务器配置问题。
4. 后续课程中对跨域有进一步的说明，但是没有用到header的配置。

[HasiKi]

我在表单提交的时候，报的错误，接口是调用成功的，老师您帮我分析一下 这个是什么问题？
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'then')

[aspirantzhang]

我只能怀疑几个点，我确实还没这么用过，另外我也不知道控制台有没有打印，只能参考下。

1. 我看它报错的点是 request.run(values); 所以我觉得可能要从values的值人手，在onFinish里面打印一下看看是否复合预期。然后顺线追踪打印。
2. 另外我怀疑那个addRoleList和editRoleList是不是要加个return哇
3. request需要throwOnError吗

[cbtan]

const onCheck = async (uri: string, method: string) => {
try {
const values = await form.validateFields();
request.run(values, uri, method);
} catch (errorInfo) {
console.log('Failed:', errorInfo);
}
};

老师，这里尝试用 form 得 validateFields,有效果，也方便

[aspirantzhang]

这个靠谱靠谱

[Percy0601]

index.tsx的return {ActionBuilder(column.actions)}; 报错，因为本章节修改了ActionBuilder增加了函数参数，在运行npm run lint时候无法正常通过：

[Percy0601]

{ActionBuilder(init.data?.layout?.tableToolBar, () => {})}
我这样写是否可以呢？

[aspirantzhang]

这个往后看，后面课程中会解决的。

[longlongagos]

基础薄弱，所以代码基本都是跟着流程打的，前面的代码都执行良好，到了表单提交的时候出现了这样的错误，后来把示例代码拷到本地，还是不好使，请问老师这会是低级错误么

[aspirantzhang]

这个是提交时已经遇到了错误，这个错误有两个位置可以捕捉。
一个是在全局错误捕捉，一个是useReuqest在使用时可以捕捉。
在《第九课：弹窗优化》中，会详细介绍全局的错误提示处理