Блог

Главная - Вопросы по программированию - Передача данных между компонентами в React (props)

Передача данных между компонентами в React (props)

#reactjs #react-router #parameter-passing #react-props #prop

#reactjs #react-маршрутизатор #передача параметров #react-props #prop

Вопрос:

В DisplayVisit component я отобразил данные:

 <div>
{(this.state.allVisit.length > 0) ? this.state.allVisit.map(data => {

    return (
        <div key={data.id} className="card-header mb-2" style={{ background: "#F0F3F7" }}>
            <div className="form-group">
                <label><b>VisitName:</b> {data.dataContext.VisitName} amp;nbsp;</label>
             </div>                                                     
                                                    
            <div className="form-group">
                <Link to={`/visit/${data.id}`} className="btn btn-secondary btn-sm" >
                    <i className="fas fa-arrow-circle-right" /> Details
                </Link>
            </div>
        </div>
    )
    }) : (
        <div className="card-header p-3 mb-2 text-black">
            <label><b>Empty</b></label>
        </div>
     )
}

</div>

Когда сведения о клике пользователя перемещаются к следующему компоненту VisitDetails — это работает.

App.js

 <Route exact path="/visit/:id" component={VisitDetails}/>

Затем я хочу иметь доступ к id и data.dataContext :

 class VisitDetails extends Component {

    render() {

        const { id } = this.props;
        const { data.dataContext } = this.props;
        //or const {data} = this.prop

        return (
            <div>
                {id}, {data.dataContext.VisitName}
            </div>
        )
    }
}

но я делаю что-то не так. Я просто учусь и пытаюсь разработать первое приложение.

Ответ №1:

В вашем компоненте DetailVisit :

 <Link to={{ pathname: `/visit/${data.id}`, state: { data: data.dataContext.VisitName} }} className="btn btn-secondary btn-sm">
   <i className="fas fa-arrow-circle-right" /> Details
</Link>

В вашем VisitDetails.js :

 class VisitDetails extends Component {

    render() {

        const { id } = this.props.match.params;
        const { data } = this.props.location.state;

        return (
            <div>
                {id}, {data}
            </div>
        )
    }
}

Комментарии:

1. Я отредактировал свой ответ, пожалуйста, попробуйте и скажите мне, есть ли ошибки

2. идентификатор в порядке, но данных нет: Cannot destructure property 'data' of 'this.props.location.state' as it is undefined.

3. Мне пришлось перезапустить, и теперь все в порядке. Но можно ли передать все мои data.dataContext данные?

4. да, вам просто нужно поместить это state: { data: data.dataContext } }}

Метки: