React + Formik (Yup) 提交表单触发校验错误，提交函数未执行

你的Formik表单三个核心位置的字段名不匹配，导致校验规则永远无法通过，所以提交逻辑createPosts不会被触发：

• 校验规则validationSchema和初始值initialValues中定义的字段为name、body
• 但表单输入组件Field的name属性设置为postName、postText，和前两处定义完全不匹配，Formik校验时读取不到name、body两个字段的有效值，永远触发必填错误。

把三处的字段名统一即可，以下是修正后的完整代码：

import React from 'react'
import Axios from 'axios';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import {Formik, Form, Field, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import Homepage from '../HomepageComponents/Homepage';

function CreatePost() {

    const createPosts = (data) => {
        Axios.post('http://localhost:3001/createPosts', {
            postName: data.postName,
            postText: data.postText
          }).then((response) => {
            console.log(response)
        });
    }

    // 校验规则字段名和Field的name保持一致
    const validationSchema = Yup.object().shape({
      postName: Yup.string().required(),
      postText: Yup.string().required()
    });

    // 初始值字段名和Field的name保持一致
    const initialValues = {
        postName: '',
        postText: ''
    }

    return (
        <div className='createPost'>
        <h1>Create post</h1>

        <Formik initialValues={initialValues} onSubmit={createPosts} validationSchema={validationSchema}>
        <Form className='loginForm'>
          {/* ErrorMessage的name和Field的name保持一致 */}
          <ErrorMessage name='postName' component='div'/>
            <Field 
            id='createPostName'
            name='postName'
            placeholder='Name'
            />

            <ErrorMessage name='postText' component='div'/>
            <Field 
            id='createPostBody'
            name='postText'
            placeholder='Text'
            />
            <button type='submit'>Create Post</button>
        </Form>
        </Formik>

        <Link to='/home'>Post</Link>
        <Router>
          <Switch>
            <Route path='/home' exact component={Homepage}/>
          </Switch>
        </Router>

        </div>
        
    )
}

export default CreatePost;

当前组件内嵌套的Router会导致路由规则仅在当前页面生效，不符合常规项目的路由设计，建议将Router组件移到项目根组件（通常是App.js）中统一管理所有路由规则。

内容的提问来源于stack exchange，提问作者Kevin. J