React + Formik (Yup) - 提交时验证错误

Question

我正在尝试创建一个具有创建 posts 功能的网站，我选择使用 formik 创建用于提交 posts 的表单。但是，当我尝试提交表单并将其发送到后端时，validationschema 介入并告诉我输入错误，请参见附图。我尝试在“createPosts”函数中使用 console.log() 检查，但其中的代码永远不会运行.

下面是我的前端“创建 post”页面的代码。

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)
        });
    }

    const validationSchema = Yup.object().shape({
      name: Yup.string().required(),
      body: Yup.string().required()
    });

    const initialValues = {
        name: '',
        body: ''
    }

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

        <Formik initialValues={initialValues} onSubmit={createPosts} validationSchema={validationSchema}>
        <Form className='loginForm'>
          <ErrorMessage name='name' component='div'/>
            <Field 
            id='createPostName'
            name='postName'
            placeholder='Name'
            />

            <ErrorMessage name='body' 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;

Image of the formik error I get upon pressing submit

顺便说一句，第二个“post”按钮纯粹是为了让我现在可以浏览页面，它没有做任何其他事情。

Answer 1

Filed 的名称应该与验证对象相匹配

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)
        });
    }

    const validationSchema = Yup.object().shape({
      name: Yup.string().required(),
      body: Yup.string().required()
    });

    const initialValues = {
        name: '',
        body: ''
    }

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

        <Formik initialValues={initialValues} onSubmit={createPosts} validationSchema={validationSchema}>
        <Form className='loginForm'>
          <ErrorMessage name='name' component='div'/>
            <Field 
            id='createPostName'
            name='name'
            placeholder='Name'
            />

            <ErrorMessage name='body' component='div'/>
            <Field 
            id='createPostBody'
            name='body'
            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;

Answer 2

在 createPosts 方法中，我认为它应该是 data.name 和 data.body，因为这是您在 initialValue 和 validationSchema 中使用的方法。

React + Formik (Yup) - 提交时验证错误

React + Formik (Yup) - Validation error when submitting

javascript

node.js

reactjs

yup

formik