Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 福米克&x2B;是的,没有显示错误_Reactjs_Formik_Yup - Fatal编程技术网

Reactjs 福米克&x2B;是的,没有显示错误

Reactjs 福米克&x2B;是的,没有显示错误,reactjs,formik,yup,Reactjs,Formik,Yup,我有以下表格: import React from 'react' import PanelInputField from './form_components/panel_input_field' import * as yup from 'yup' import { withFormik, FormikErrors, FormikProps } from "formik"; const validationSchema = yup.object().shape({ length: yu

我有以下表格:

import React from 'react'
import PanelInputField from './form_components/panel_input_field'
import * as yup from 'yup'
import { withFormik, FormikErrors, FormikProps } from "formik";

const validationSchema = yup.object().shape({
  length: yup
    .number()
    .min(200, 'NOT BIG ENOUGH')
    .required()
})

class SpecificationsForm extends React.PureComponent {
  render() {
    const {
      values,
      handleInputChange,
      handleSelectChange,
      touched,
      errors
    } = this.props;

    console.log(errors)
    return (
      <div className="panel panel-default specifications-panel" id="js-turbosquid-product-specifications-panel">
        <div className="panel-heading">
          <a href="#" className="js-more-info" data-toggle="collapse" data-target="#specifications-panel-instructions" tabIndex="-1">
            Specifications
            <i className="fa fa-question-circle" />
          </a>
        </div>

        <div className="panel-body panel-collapse collapse in" id="specification-panel-body">
          <div className="panel-body-container">
            <div id="specifications-panel-instructions" className="panel-instructions collapse" />

            <div className="row">
              <div className="col-xs-6">

                <PanelInputField 
                  label='Length'
                  value={ values.length }
                  onChange={ handleInputChange } 
                  formName='turbosquid_product_form_length'
                  fieldName='length'
                />
                <div className="form-field-error">{errors.length ? errors.length : "No Error"}</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const ProductSpecificationsMotionCapturePanel = withFormik({
  validationSchema,
  enableReinitialize: true,
  mapPropsToValues: (props) => (props),
  handleInputChange: (props) => (props.handleInputChange),
  handleSelectChange: (props) => (props.handleSelectChange),
})(SpecificationsForm)

export default ProductSpecificationsMotionCapturePanel
从“React”导入React
从“./form\u components/panel\u input\u field”导入PanelInputField
从“yup”导入*为yup
从“formik”导入{withFormik,FormikErrors,FormikProps};
const validationSchema=yup.object().shape({
长度:是的
.number()
.min(200,“不够大”)
.required()
})
类规范窗体扩展了React.PureComponent{
render(){
常数{
价值观
handleInputChange,
不可控制的变化,
感动的,
错误
}=这是道具;
console.log(错误)
返回(
{errors.length?errors.length:“无错误”}
)
}
}
const ProductSpecificationsMotionCapturePanel=使用Formik({
验证模式,
enableReinitialize:true,
mapPropsToValues:(道具)=>(道具),
handleInputChange:(道具)=>(道具.handleInputChange),
handleSelectChange:(道具)=>(道具.handleSelectChange),
})(规格表格)
导出默认产品规范ActionCapturePanel
表单工作正常,显示正常,但我似乎无法让formik看到错误。在本例中,我有一个带有整数值的长度字段。每当我输入一些东西时,验证都会工作(console.log打印),但对象是完全空的

即使我在输入中写入非数字,也不会显示任何错误


有人对我可以做些什么来让它工作有什么建议吗?

您设置了初始值吗?看起来你不在这个文件中。如果没有,请尝试设置它并查看它是否有效。

此外,您不能将
初始值设置为空对象(例如
const initialValues={};
)。必须为要显示错误的字段名包含初始值。例如,
const initialValues={name:''}没有名字的初始值。看看这个