передача сопоставленных данных из API в другой компонент - PullRequest
Новая
       15

передача сопоставленных данных из API в другой компонент

0 голосов
/ 13 июня 2019

, поэтому у меня есть данные, которые я получаю из API в componentDidMount, и затем я отображаю их в рендере.Допустим, карта возвращает 4 объекта.Как создать событие нажатия кнопки, которое собирает данные об определенных объектах и ​​передает их по маршруту к другому компоненту?

код: 


clickEvent(){
???
}

this.example = this.state.data.slice(1).map((data, key) =>

<div key={item.Id}>
<div>{data.dataIWantToPass}</div>
<Link to='/next_component_path' onClick={clickEvent}}>Click</Link>
</div>

Итак, скажем, вышеприведенное возвращает 4 объекта,Я хочу третий, когда ссылка нажимается, чтобы передать свои данные.

Ответы [ 3 ]

0 голосов
/ 13 июня 2019 

clickEvent(dataUWantToPass){
    <NewComponent dataPassed={dataUWantToPass} />
}

this.example = this.state.data.slice(1).map((data, key) =>
    <div key={data.Id}>
        <div>{data.dataIWantToPass}</div>

        //Link is a react-router-dom component, this helps you to redirect to other component (to which you have added the route for
        <Link to='/next_component_path'>                        
            <button onClick={()=>this.clickEvent(data.dataIWantToPass)} value="Click"/>
        </Link>
    </div>
))

Вы можете получать данные в NewComponent в качестве реквизита. Если вы хотите проверить, чем вы можете написать метод componentWillReceiveProps () в NewComponent как: 

componentWillReceiveProps(reveivedProps){
    console.log(reveivedProps);
}
0 голосов
/ 13 июня 2019

Хорошо, я решил это, собрав воедино различные фрагменты комментариев, так что спасибо за ваш вклад.Вот как это было решено:

На теге ссылки я сделал это: 

<Link to={{ pathname: '/path', query:{passed_id: data.id} }}></Link>

Затем на компоненте, к которому ведет путь: 

this.setState({passed_id: this.props.location.query.passed_id});

Иэто дало мне доступ к данным, которые я передавал, в данном случае ID.Теперь мне просто нужно выяснить, как сравнить этот идентификатор с зацикленными данными, которые я также передаю (через локальное хранилище), и отобразить их.Я полагаю, еще один вопрос.

0 голосов
/ 13 июня 2019

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

...