React+Vite项目基于Formik与Yup封装可复用表单组件报错求助

1. 修复AppInputField的语法错误 #

你的AppInputField组件参数列表存在语法错误，多余的右括号会导致组件无法正常渲染，进而影响Formik上下文的获取：

// 错误代码
const AppInputField = ({name, label, placeholder, type='text') => {

// 修正后
const AppInputField = ({name, label, placeholder, type='text'}) => {

2. 修改AppForm，添加form标签并绑定Formik提交逻辑 #

Formik需要通过<form>标签来触发提交流程，你需要将子组件包裹在form标签内，并通过Formik的render props获取handleSubmit绑定到form的onSubmit事件：

function AppForm({initialValues, onSubmit, validationSchema, children}) {
    return (
        <Formik
            initialValues={initialValues}
            onSubmit={onSubmit}
            validationSchema={validationSchema} 
        >
            {({ handleSubmit }) => (
                <form onSubmit={handleSubmit}>
                    {children}
                </form>
            )}
        </Formik>
    );
}
export default AppForm;

3. 简化SubmitButton组件 #

不需要通过useFormikContext获取handleSubmit，只要按钮的type='submit'，就能触发form的onSubmit事件（已绑定Formik的提交逻辑）：

function SubmitButton({title}) {
    return (
        <AppButton 
            title={title} 
            type='submit' 
        />
    );
}
export default SubmitButton;

可选优化：添加表单错误提示 #

在AppInputField中通过useFormikContext获取errors和touched，实现实时错误提示：

const AppInputField = ({name, label, placeholder, type='text'}) => {
    const { handleChange, handleBlur, values, errors, touched } = useFormikContext();
    return (
        <div className="input-group">
            <label htmlFor={name} className="input-label">{label}</label>
            <input
                autoComplete="off"
                className={`input-text ${errors[name] && touched[name] ? 'input-invalid' : ''}`}
                id={name}
                name={name} 
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder={placeholder}
                type={type}
                value={values[name]}
            />
            {errors[name] && touched[name] && (
                <span className="error-text">{errors[name]}</span>
            )}
        </div>
    )
}
export default AppInputField

错误原因说明 #

• 语法错误：AppInputField的参数括号错误导致组件初始化失败，间接引发上下文获取异常
• 提交逻辑错误：直接在按钮上绑定handleSubmit不符合Formik的设计规范，应该通过form标签的onSubmit触发提交，Formik会自动处理表单验证、阻止默认行为等流程
• 缺少form标签：原AppForm未包裹form标签，导致提交事件无法正确关联Formik的上下文

内容的提问来源于stack exchange，提问作者Tony Riddle