Question

TypeError：无法将未定义或空转换为对象 React Validation

2019-06-11

7736

reactjs

我使用了 React 验证库

https://www.npmjs.com/package/react-validation

如果我从任何其他页面访问我的页面，它不会出现任何错误。但是当我刷新页面时，它会出现错误

TypeError: Cannot convert undefined or null to object

如果有人之前遇到过这个问题，请提出一个想法。

代码：

import React from 'react';

import {
    Card,
    CardBody,
    CardTitle,
    Row,
    Col,
    FormGroup,
    Label,
    Alert
  } from 'reactstrap';
import Input from 'react-validation/build/input';
import Button from 'react-validation/build/button';
import Form from 'react-validation/build/form';
import axios from 'axios';
import api from '../../config/api';
import messages from '../../config/messages';
import Select from 'react-validation/build/select';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const required = (value, props,components) => {

    if(components.formReset!=undefined)
    {
        if (!components.formReset[0].value && (!value || (props.isCheckable && !props.checked))) {

        return <span className="text-danger is-visible">{messages.required}</span>;
        }
        else if(components.formReset[0].value)
        {
            return <span className="text-danger is-visible"></span>;
        }
    }

}
;


class View extends React.Component {
    constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
        this.sendReply = this.sendReply.bind(this);
        this.toggle = this.toggle.bind(this);
        this.onStatusChange=this.onStatusChange.bind(this);
        this.handleEditorChange=this.handleEditorChange.bind(this);
        this.state = {
             response:null,
             loading: false,
             message:'',
             status:'',
             attachment1:[],
             status_list:[],
             formReset:true

         };

    }


    componentDidMount() {

        this.setState({formReset:true});


    }

    onStatusChange(event) {
        this.setState({"formReset":false});
        this.setState({
                status: event.target.value
            });

    }

    handleEditorChange(data) {
        this.setState({"formReset":false});
        this.setState({ message:data });
    }

    sendReply()
    {

            /*** code after form submission***/

    }

    toggle() {


    }

    onInputChange(event) {
        event.preventDefault();
        this.setState({"formReset":false});
        this.setState({
                [event.target.name]: event.target.value
            });


    }




    render() {
        var _this = this;
        return (
            <aside className="customizer">
                {/*--------------------------------------------------------------------------------*/}
                {/* Toggle Customizer From Here                                                    */}
                {/*--------------------------------------------------------------------------------*/}

                <div className="customizer-body pt-3">
                <div>

                    {/* --------------------------------------------------------------------------------*/}
                    {/* Start Inner Div*/}
                    {/* --------------------------------------------------------------------------------*/}
                    <Row>

                    <Col md="12">
                        <Card>
                            <CardTitle className=" border-bottom p-3 mb-0">

                            </CardTitle>
                            <CardBody>

                                <Form ref={c => {
                                    this.replyform = c;
                                    }}>


                                    <Input type="hidden" name="formReset" id="formReset" value={this.state.formReset} />

                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Reply *</Label>
                                            <Col sm="10">

                                                <CKEditor
                                                    editor={ ClassicEditor }
                                                    data={this.state.message}
                                                    config={ {

                                                        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
                                                    } }
                                                    onChange={ ( event, editor ) => {
                                                        const data = editor.getData();
                                                        this.handleEditorChange(data);

                                                    } }

                                                />

                                            </Col>
                                        </Row>
                                    </FormGroup>
                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Status</Label>
                                            <Col sm="10">

                                                <Select id="status" className="custom-select form-control" name="status" onChange={this.onStatusChange} value={this.props.status_id: null}>
                                                    <option value="">Select</option>
                                                    {this.state.status_list.map((status, index) => {

                                                        return (

                                                        <option key={index} value={status.value}>{status.label}</option> 

                                                        );
                                                    })}
                                                </Select>


                                            </Col>
                                        </Row>
                                    </FormGroup>
                                    <FormGroup>
                                        <Row>
                                            <Label sm="2">Attachments</Label>
                                            <Col sm="10">

                                                    <Input
                                                    type="file"
                                                    id="attachment1" name="attachment1[]"
                                                    onChange={this.onInputChange} 
                                                    multiple="multiple"
                                                    />

                                            </Col>
                                        </Row>
                                    </FormGroup>

                                    <div className="border-top pt-3 mt-3 d-flex no-block"> 

                                        <Button type="button" onClick={this.sendReply} className="btn btn-dark mr-2 ml-auto">
                                        Send Reply
                                        </Button>

                                    </div>
                                </Form>
                            </CardBody>
                        </Card>
                    </Col>
                    </Row>
                    {/* --------------------------------------------------------------------------------*/}
                    {/* End Inner Div*/}
                    {/* --------------------------------------------------------------------------------*/}
                </div>
                </div>
            </aside>
        );
    }
}
export default View;

错误图像：

Answer 1

非常疯狂的错误：

import { Formik, Form, Field } from 'formik';

以上所需的初始值，如果您不想给出初始值，请用空初始化它。例如

const initialValues = {
    firstname: "",
    lastname: ""
}

然后在<Formik 标签中

initialValues={initialValues}

Answer 2

升级 react 及其软件包后，我遇到了上述问题，Hassan Ali Shahzad 的回答解决了这个问题，代码可能对某些人有帮助

<Formik
  enableReinitialize={true}
  initialValues={{
    heatmaps: '',
  }}

Answer 3

使用 formik

经过调试，我发现 initialValues 对象名称有拼写错误。请确保您拥有与您定义的 initalValues 相同的对象。在我的例子中，我有 timeCapturesInitialValues 对象，但在 Formik prop 中使用了 timeCapturesInitailValues 。