Передача состояния между компонентами

Question

По кнопке handleAddElement добавляю результат инпута в массив names, но компонент Show не видит этого результата без состояния как я понял, пытаюсь в нем отслеживать состояние массива, но безуспешно, подскажите в чем проблема.

let names = [
    'name1',
    'name2',
    'name3',
];


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

class Element extends React.Component {

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

.....

    handleAddElement = (e) => {
        e.preventDefault();
        const {input} = this.state;
        this.setState({
            input: ''
        });
        names.push(input);
    }

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

class Show extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            names: names
        };
    }

    render() {
        return (
            <div>
                <ElementList names={names}/>
            </div>
        );
    }
}

Answer 1

У вас 3 компонента.

Show - главный компонент, как-то получает данные для names и передает их пропсами в ElementList.
ElementList - получает пропсами массив names на основе которого строятся компоненты Element
Element - конечный компонент

В итоге, Show должен хранить в себе состояние names, а также передавать ф-ю его изменения до Element

А что у вас происходит в Element? Он живет своей жизнью.

Читайте внимательно документацию

class Element extends React.Component {

    constructor (props) {
        super(props);
        //что вообще этот стейт делает и для чего он нужен?
        this.state = {
            input: ''
        };
    }

.....

    handleAddElement = (e) => {
        e.preventDefault();
        const {input} = this.state;
        this.setState({
            input: ''
        });
        names.push(input); // это что? откуда кмпонент знает про существование names?
    }

    render () {
        const {input} = this.state;
        return (
            /* const { input } = this.state; это что вобще?*/
            <button onClick={this.handleAddElement}>Добавить</button> 
        )
    }
}

Должно быть как-то так

class Show extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names
        };
    }

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

    render() {
        return (<div >
            //пробрасываем ф-ю изменения состояния, не забываем биндить
            <ElementList names={names} addName={this.addName.bind(this)} />
        </div>
        );
    }
}


function ElementList({ names, addName }) {
    return (
        names.map((name) =>
        // пробрасываем ф-ю до компонента - addName={addName}
            <Element key={name} brand={name} addName={addName} /> 
        ));
}


class Element extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            input: ""            
        }
    }

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

    render() {
        //Тут еще, видимо, <input /> должен быть
        return <button onClick={this.handleAddElement}> Добавить </button>
    }
}

БЛОГ НА HUSL

Передача состояния между компонентами

Ответы (1 шт):