кто-нибудь может объяснить мне, почему это значение в функции 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);



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поскольку renderInput не вызывается в контексте компонента — вы забыли связывать его в this в конструкторе, как вы сделали с renderError.
Вместо того, чтобы вызывать эту функцию как 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>
);
}
Да, забыл this.renderInput = this.renderInput.bind(this);