Реагировать на undefined this в функции

кто-нибудь может объяснить мне, почему это значение в функции renderInput не определено. Я просматриваю код, и все выглядит хорошо.

Вот ошибка

Uncaught TypeError: Cannot read property 'renderError' of undefined

Это мой компонент AddCatalog. Когда он вызывает console.info(this) в renderInput, это возвращает меня без определения

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.info(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);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
786
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку renderInput не вызывается в контексте компонента — вы забыли связывать его в this в конструкторе, как вы сделали с renderError.

Да, забыл this.renderInput = this.renderInput.bind(this);

Paweł Baca 08.03.2019 12:46

Вместо того, чтобы вызывать эту функцию как 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>
        );
    }

Другие вопросы по теме