MrYogurt
@MrYogurt

Откуда ошибка is not a function?

Имеется код:
class AddNewElement extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            input: ''
        };
        ....
        this.handleAddElement = this.handleAddElement.bind(this);
    }

    ....

    handleAddElement = (e) => {
        e.preventDefault();
        this.props.AddBrand(this.state.input);
    }

    render () {
        return (
					....
                    <button onClick={this.handleAddElement}>Добавить</button>
                    ....
        )
    }
}

class Show extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            names: ["name1", "name2", "name3",]
        };
    }

    AddBrand(name) {
        this.setState((prevState) => ({ names: [...prevState.names, name] }));
    }

    render() {
        return (
            <div>
                <ElementList names={this.state.names} AddBrand={this.AddBrand.bind(this)}/>
            </div>
        );
    }
}

function ElementList({names, AddBrand}) {
    return names.map((name) => (
        <Element key={name} brand={name} AddBrand={AddBrand}/>
    ));
}


По клику на "handleAddElement" состояние инпута должно попадать в массив "names", в состоянии компонента "Show" и добавляться новый элемент, но я получаю ошибку "TypeError: this.props.AddBrand is not a function". С биндами вроде все в порядке, подскажите в чем проблема.
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
Не вижу в каком месте передаете AddBrand в AddNewElement, используйте propTypes чтобы контролировать пропсы. Никогда не делайте bind в пропсах, переделайте метод на стрелочную функцию. Ну и если код новый, читайте оригинал документации и делайте функциональные компоненты.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы