Задать вопрос
  • Как обновить дочерний компонент из родительского?

    Guedda
    @Guedda Автор вопроса
    Начинающий front-end разработчик
    Да, я пробовал сначала этот вариант, но он не помог. Немного переделал, но теперь появляется другая ошибка, связанная с этим вопросом. Видимо, стоит лучше описать код, который у меня есть - я постараюсь:
    Родительский компонент:
    export default class App extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                response: false,                           
                selfUser: undefined,                       
                someId: undefined,
            }
        }
    
        getUser() {
            var self = this;
            someAjax().then(function(user) {
                if (user) {
                    self.setState({response: true, selfUser: user, someId: user.someId});
                } else {
                    self.setState({response: true, selfUser: undefined, someId: undefined});
                }
            });
        }
    
        setId(id) {
            this.setState({someId: id});
        }
    
        componentDidMount() {
            this.getUser();
        }
    
    
        render() {
            if (this.state.response) {
                let page;
                if (this.state.selfUser) {
                            page = (
                                <Child
                                    sometId={this.state.someId}
                                    setId={this.setId.bind(this)} />
                            );
                } else {
                    page = (<div>No user</div>)
                }
                
                return (
                    <div>
                        {page}        
                    </div>
                )
            } else {
                return (
                    <div>No response</div>
                )
            }
        }
    
    }


    Дочерний компонент:
    export default class Child extends Component {
    
        constructor(props) {
            super(props);
    
            this.state = {
                status: "none",
                someData: undefined,
            }
        }
    
        getData() {
            $.ajax({
                url: 'someUrl'
                type: 'GET',
                success: function(data) {
                     this.setState({ status: "success", someData: data});
                }
            });
        }
    
        goToNextPage(item) {
            this.props.setId(item.Id);
        }
    
        renderDataChild(item) {
            let goToDataChildPage = this.goToNextPage.bind(this, item);
            return (
                <div key={item.Id} className="brick main-shadow">
                    <div className="brick-inner" onClick={goToDataChildPage }><strong>{item.Name}</strong></div>
                </div>
            );
        }
    
        componentDidMount() {
            this.getData();
        }
    
        render() {
            switch (this.state.status) {
                case "none":
                    return (<p></p>);
                case "success":
                    if (this.state.someData) {
                        let someData = this.state.someData.values;
                        let tens = someData.map(function(obj) {
                            return this.renderDataChild(obj);
                        }.bind(this));
    
                        return (
                            <div>
                                {tens}
                            </div>
                        );
                    } else {
                        return (
                            <div>No data</div>
                        );
                    }
            }
        }

    Так вот теперь я первый раз получаю все, а когда меняю someId (нажимаю на какой-нибудь brick), то JS пишет ошибку
    Uncaught TypeError: Cannot read property 'map' of undefined

    ругаясь на строку
    let tens = someData.map(function(obj) {
    Что я не так делаю? Всё это связано с props родительского компонента
    Ответ написан