Question

有人可以向我解释为什么renderInput函数中的该值未定义。我浏览了代码，一切看起来都很好。

这是错误

Uncaught TypeError: Cannot read property 'renderError' of undefined

这是我的组件AddCatalog。当它在renderInput中调用console.log（this）时，这使我返回未定义的状态

import React, {PropTypes} from "react";
    import {Field, reduxForm} from "redux-form";
    //
    class AddCatalog extends React.Component {
        constructor(props) {
            super(props);
            this.renderError = this.renderError.bind(this);
        }
        renderError({error, touched}) {
            alert("asds");
            if (touched && error) {
                return <div className="red">{error}</div>;
            }
        }
        renderInput({input, label, meta}) {
            return (
                <div className="form-group">
                    <label>{label}</label>
                    <input {...input} className="form-control" autoComplete="off" />
                    {this.renderError}
                </div>
            );
        }
        onSubmit(formValues) {
            console.log(formValues);
        }
        render() {
            return (
                <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
                    <div className="row paddingLR30 container-fluid">
                        <div className="col-12">
                            <h2>Dane placówki</h2>
                        </div>
                        <div className="col-3">
                            <Field label="Nazwa placówki*" name="name_kindergarten" component={this.renderInput} />
                        </div>
                    </div>
                    <button>Submit</button>
                </form>
            );
        }
    }

    const validate = (formValues) => {
        const errors = {};
        if (!formValues.name_kindergarten) {
            errors.name_kindergarten = "Musisz podać nazwę przedszkola";
        }
        return errors;
    };

    export default reduxForm({
        form: "simple",
        validate
    })(AddCatalog);

Answer 1

您没有像this.renderError()那样调用此函数，而是给了this.renderError这样的指针。

当前代码：

 renderInput({input, label, meta}) {
        return (
            <div className="form-group">
                <label>{label}</label>
                <input {...input} className="form-control" autoComplete="off" />
                {this.renderError}
            </div>
        );
    }

正确的代码：

 renderInput({input, label, meta}) {
        return (
            <div className="form-group">
                <label>{label}</label>
                <input {...input} className="form-control" autoComplete="off" />
                {this.renderError()}
            </div>
        );
    }

Answer 2

因为在组件的上下文中未调用renderInput-您忘记了在构造函数中将其bind Object与this进行交互。

反应未定义的功能

2 个答案: