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

Question

[MrYogurt]

Имеется код:

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". С биндами вроде все в порядке, подскажите в чем проблема.

Answer 1

[Владимир]

Не вижу в каком месте передаете AddBrand в AddNewElement, используйте propTypes чтобы контролировать пропсы. Никогда не делайте bind в пропсах, переделайте метод на стрелочную функцию. Ну и если код новый, читайте оригинал документации и делайте функциональные компоненты.

Comments

[MrYogurt]

Рекомендации понялпринял. А каким образом на данный момент мне передать AddBrand? Мне казалось, что бинд позволяет получить доступ через пропсы в других компонентах. Вы не удивляйтесь, что я отмороженный, просто только начал вникать.

[Владимир]

MrYogurt, закинь пример на codesandbox
Вместо bind нужно использовать стрелочную функцию и ты это уже делаешь в одном из коспонентов, а в Show - нет. Коспонент AddNewElement в твоем коде есть, а вот где он используется - нет. Разберись сначала в том что ты накопипачтил тут

[MrYogurt]

Владимир, я везде уже стрелки сделал, в части функций было действительно как надо, но это просто разница в гайдах, на которую я даже внимания не обратил и делал бинды просто везде. Все приложение закинул сюда https://codesandbox.io/s/heuristic-galileo-4gnmw?f...

[Владимир]

MrYogurt, Код твой?
Ты пытаешся вызвать проперти, которое не передаешь. Используй PropTypes чтобы обозначить обязательные проперти, тогда тебе сам реакт подскажет где ты ошибся.
Внимательно читай свой код, и внимательно читай родную документацию реакта.
Ошибка вылазит в компоненте AddOperator, посмотри внимательно какие проперти ты в него передаешь.

[MrYogurt]

Владимир, задание мое, а "мой" код понятие философское. А проблему решил с подсказки другого человека и она оказалась в моем затупе. В изначальном примере в Show, у меня в рендере еще один компонент AddElement, в него и нужно было прописать бинд, чтобы создать связь, а я ее сделал не туда. Итог:

class Show extends React.Component {
render() {
        return (
            <div>
            <div>
                <ElementList opNames={this.state.opNames} />
            </div>
                <div>
                    <AddElement AddBrand={this.AddBrand.bind(this)}/>
                </div>
            </div>
        );
    }
}

Использовать очередной PropTypes конечно бы хорошо, но проблема в том, что я только учусь и от всех этих "лучше бы использовать" совсем не плавно едет крыша. Я обещаю обязательно этому поучиться, но сейчас разбираюсь просто в базисе и лишняя каша мне ни к чему.

[Владимир]

MrYogurt, Нужно писать меньше но лучше. Напиши два компонента но опиши их полностью по правилам, и тогда не будет тупняков, а сейчас ты в трех соснах запутался.