### 🐛 bug 描述 onGetCaptcha获取验证码实现中调用message.error或者message.sucess，如果使用了const {message} = App.useApp() 中的message 会报错。如果使用import {message} from "antd"中的message则没有问题，但会产生警告 Warning: [antd: message] Static function can not consume context like dynamic theme. Please use 'App' component instead.。 ### 📷 复现步骤 | Recurrence steps ModalForm中引用const {message} = App.useApp() ，在ProFormCaptcha组件onGetCaptcha方法中调用message.error或者message.sucess ### 🏞 期望结果 | Expected results 弹出message信息框 ### 💻 复现代码 | Recurrence code ` import React, {useRef} from "react" import {useIntl} from "@umijs/max" import {App, Button, message} from "antd" import {LockOutlined, UserOutlined, KeyOutlined} from "@ant-design/icons" import {ModalForm, ProFormCaptcha, ProFormInstance, ProFormText} from "@ant-design/pro-components" import ServerSideValidator from "@/utils/ServerSideValidator" import {UserRegister, VerificationCodeSend} from "@/services/react-backend/User" import FormHeader from "./FormHeader" const Register: React.FC = () => { const intl = useIntl() const formRef = useRef() const intlRegisterNow = intl.formatMessage({ id: 'app.register.now', }) // const {message} = App.useApp() return ( formRef={formRef} width={400} layout='horizontal' title={} modalProps={{ destroyOnClose: true, onCancel: () => console.log('cancel'), }} submitter={{ render: () => { return [] }, }} trigger={ {intlRegisterNow} } onFinish={ (values: { verificationCode?: string } & API.User) => { return UserRegister(values).then(() => { message.success(intl.formatMessage({ id: 'app.register.succeed', })) }).catch((e: Error) => { formRef.current?.validateFields().then(() => { console.log(e) message.error(e.message) }) }) } } > , }} placeholder={'邮箱'} rules={[ { required: true, message: '请输入用户名!', }, ServerSideValidator.check() ]} /> , }} placeholder={'密码'} rules={[ { required: true, message: '请输入密码！', }, ServerSideValidator.check() ]} /> , }} captchaProps={{ size: 'large', }} phoneName="email" placeholder={'请输入验证码'} captchaTextRender={(timing, count) => { if (timing) { return `${count} ${'获取验证码'}`; } return '获取验证码'; }} name="code" countDown={55} rules={[ { required: true, message: '请输入验证码！', }, ServerSideValidator.check() ]} onGetCaptcha={ async (phone) => { return formRef?.current?.validateFields(['email']).then( async () => { await VerificationCodeSend({ email: formRef?.current?.getFieldValue('email'), mode: "register" }).then(() => { console.log(intl.formatMessage({ id: 'app.verificationCode.sent', })) message.success(intl.formatMessage({ id: 'app.verificationCode.sent', })) }).catch((e: Error) => { return formRef?.current?.validateFields(['email']).then(() => { message.error(e.message) return new Promise((resolve, reject) => { reject() }) }) }) } ) } } /> ) } export default Register ` ### © 版本信息 - Ant Design Pro 版本: [@ant-design/pro-components ^2.3.57] - umi 版本["@umijs/route-utils": "^2.2.2"] - 浏览器环境[chrome 版本 114.0.5735.91（正式版本）（64 位）] - 开发环境 [e.g. mac OS] ### 🚑 其他信息 "dependencies": { "@ant-design/icons": "^4.8.0", "@ant-design/pro-components": "^2.3.57", "@ant-design/use-emotion-css": "1.0.4", "@umijs/route-utils": "^2.2.2", "antd": "^5.2.2", "classnames": "^2.3.2", "lodash": "^4.17.21", "moment": "^2.29.4", "omit.js": "^2.0.2", "rc-menu": "^9.8.2", "rc-util": "^5.27.2", "react": "^18.2.0", "react-cookies": "^0.1.1", "react-dev-inspector": "^1.8.4", "react-dom": "^18.2.0", "react-helmet-async": "^1.3.0" },

🐛 [BUG]onGetCaptcha中使用message.error提示TypeError: message.error is not a function #10765

Company

Community

Support

Connect