0
votes

transmission de données mappées d'une API à un autre composant

donc j'ai des données que j'obtiens d'une api dans componentDidMount, puis je mappe dessus dans le rendu. disons que la carte renvoie 4 objets. Comment créer un événement de clic sur un bouton qui capture les données de cet objet spécifique et le transmet le long d'une route à un autre composant?

code:

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>

Disons ce qui précède renvoie 4 objets. Je veux le troisième, lorsque le lien est cliqué pour transmettre ses données.

reactjs react-router-dom array.prototype.map

4 commentaires

Cela vous aide-t-il? - stackoverflow.com/questions/30115324/…

1/2 Oui. Passer les données comme un param le long de la route est bon. Comment puis-je accéder à ces données de l'objet spécifique serait l'autre 1/2.

Vous avez deux exemples très simples ici: stackoverflow.com/a/44860918/9220122

Copie possible de Passer les accessoires dans Link react-router

3 Réponses :

-1
votes

Vous devez utiliser Redux. Cela vous permet de stocker des données dans Global Application Store et d'obtenir les données de n'importe quel composant souscrit au magasin. Aujourd'hui, presque tous les projets de réagissance ont besoin de Redux pour gérer les données de l'application

2 commentaires

Bien que je suis d'accord, utilise localStorage et état pour l'instant. Ce que je cherche, c'est comment puis-je cibler cette donnée d'objets spécifique, de sorte que je puisse le stocker quelque part?

Eh bien, oui, si vous n'avez que quelques cas dans votre application avec la gestion des données entre les composants, localStorage est un bon choix. Cependant, si vous avez un projet compliqué, un redux est nécessaire. Comment utiliser localStorage, vous pouvez utiliser google, c'est simple

0
votes

componentWillReceiveProps(reveivedProps){
    console.log(reveivedProps);
}

1 commentaires

le ci-dessus rend juste le composant à l'intérieur de la balise de lien? J'utilise des composants comme des pages, donc les données que je veux envoyer sont envoyées à un nouveau composant (page).

0
votes

D'accord, j'ai résolu ce problème en rassemblant divers extraits de commentaires, alors merci pour vos contributions. Voici comment cela a été résolu:

Sur la balise de lien, j'ai fait ceci:

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

Puis sur le composant vers lequel le chemin est acheminé:

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

Et cela m'a donné accès aux données que je transmettais, dans ce cas un identifiant. Maintenant, j'ai juste besoin de comprendre comment comparer cet ID, avec les données en boucle que je transmets également (via le stockage local), et mapper dessus. Une autre question, je suppose.

0 commentaires