在raect.js formik表单中显示表单验证

Question

我想以formik形式显示来自节点js API的验证错误

我如何以当前的formik形式使用此解决方案stackoverflow

  import React from "react"
  import {
  Button,
  FormGroup
  } from "reactstrap"
  import { Formik, Field, Form, ErrorMessage } from "formik"
  import * as Yup from "yup"
  import { history } from "../../../../history"
  import { connect } from "react-redux"
  import { signupWithJWT } from "../../../../redux/actions/auth/registerActions"



  const SignUpSchema = Yup.object().shape({
  email: Yup.string()
 .required("Required"),
  })

  class RegisterJWT extends React.Component {

  render() {

  const nodeError = [];    
  const onSubmit = (values, setFieldError) => {

  console.log("values " + values.name)
  this.props.signupWithJWT(values.name);

  // setFieldError('name','test required');
  // nodeError.push({
  //   'name' : 'test required'
  // })
  // console.log(setFieldError('name','test required'))
  // console.log(nodeError); 
  }

   return (

   <Formik
   initialValues={{
    
    name: "",
   }}
   validationSchema={SignUpSchema}
   onSubmit={onSubmit}

   >
  {props => {
  console.log(props.errors)
  return (
    <Form>
      <FormGroup>
        <label htmlFor="name">Name</label>
        <Field
          className="form-control"
          name="name"
          placeholder="Jane"
          type="text"
        />
        <ErrorMessage
          name="name"
          component="div"
          className="field-error text-danger"
        />
      </FormGroup>

      <div className="d-flex justify-content-between">
        <Button.Ripple
          color="primary"
          outline
          onClick={() => {
            history.push("/")
          }}
        >
          Login
       </Button.Ripple>
        <Button.Ripple color="primary" disabled={!(props.isSubmitting || 
        props.isValid)} type="submit">
          Register
        </Button.Ripple>
  
      </div>
    </Form>
    )
   }}
   </Formik>
   )
   }
  }

 const mapStateToProps = (state) => ({
 reduxError: state.error
 })

 export default connect(mapStateToProps, { signupWithJWT })(RegisterJWT)

我尝试使用以下方法，但无法正常工作。我将所有错误都存储在redux中，问题是提交表单后，提交验证错误保存在redux中后，首先运行validate方法。

 validate = {
  values => {
    let errors = {};
    errors.name = this.props.reduxError[0].name;
    
    return errors;
  }
}