Je crée une application simple qui crée des "cartes" en mappant via des commandes de travail (la première API). À travers cette API, il y a un Ceci est mon app.js p> opéditeur indicateur code> nécessaire pour récupérer les données des travailleurs de la deuxième API. const Card = props => {
console.log(props) //<-- only order data
let date = new Date( props.order.deadline * 1000 );
const newTime = date.toLocaleString()
return (
<div className="card-container">
<h1 className="order-name">{props.order.name}</h1>
<p className="ml-5 mr-4">{props.order.description}</p>
<div>
<h5> Worker: {props.order.workerId} </h5> //<-- this is where I need the workers info to go
</div>
<p className="date">{newTime}</p>
</div>
)
}
export default Card;
3 Réponses :
On dirait que vous écrasez vos travailleurs dans votre carte à l'appel de Fetch. Vous devez copier les data de travailleur existants des itérations de la boucle précédente et la combiner avec le travailleur de l'itération actuel.
componentDidMount(){
fetch('https://www.hatchways.io/api/assessment/work_orders')
.then(res=> res.json())
.then(({ orders }) => {
this.setState({
orders: orders
}, () => {
this.state.orders.map(order => {
fetch(`https://www.hatchways.io/api/assessment/workers/${order.workerId}`)
.then(response=> response.json())
.then(workersData => {
this.setState({
workersData: [...this.state.workersData, workersData]
})
})
})
});
})
.catch(err => {
console.log(err)
});
}
Je n'ai pas eu de problème qui passe au travailleur en tant que composant CardList . J'ai mis en œuvre l'opérateur de la diffusion là-bas comme vous l'avez suggéré, mais mon résultat dans mon composant est toujours le même. Ce n'est que la commande accéder à travers. Il continue également d'écraser
Tu as passé comme ça?
Ce que vous pourriez faire est de trouver le travailleur qui correspond à la commande dans votre fonction de carte.
Je suppose que votre code devrait regarder quelque chose dans ces lignes. P>
const CardList = props => {
console.log(props) //<-- this contains the 'orders' and 'workersData'
const findWorker = (id) => props.workersData.find(worker => worker.id === id);
const workOrderJsx = props.orders.map(order => {
const worker = findWorker(order.id);
return (
<Col key={order.id} md={6} >
<Card order={order} worker={worker}/>
</Col>
)
})
return (
<ListGroup>
<MDBContainer fluid={true} >
<MDBRow>
{workOrderJsx}
</MDBRow>
</MDBContainer>
</ListGroup>
);
}
export default CardList;
Tout d'abord, vos multiples demandes d'obtention de travailleurData pour chaque commande sont toujours remplacées par la nouvelle réponse, ce qui signifie que votre travailleur data contient des données pour la dernière commande. Donc, vous devriez utiliser l'objet là où chaque travailleur data sera mis à l'encontre de chaque commande.
La structure doit être comme Puis dans votre méthode de la carte, vous pouvez obtenir des travailleurs spécifiés en tant que commande. Travelerid et transmettez-le sur le composant où vous obtiendrez des données correctes pour chaque commande. J'espère que cela aide :)
Plus de détails:
Dans votre appel d'API d'aller chercher des travailleurs, faites-le comme ceci:
De cette façon, vous pouvez maintenir tous vos travailleurs data contre commande.workerid. Après cela, dans votre carte, la méthode de commande est la suivante:
De cette façon, vous obtiendrez des travailleurs liés à votre commande dans votre composant de carte et vous pouvez l'utiliser comme vous le souhaitez. :) {[commandeworkerid]: fetchedworkerData}
this.setstate ({TraversData: {... this.state.workersData, [commande.workerid]: TravailleursData}
Pouvez-vous spécifier un peu plus. Je ne remplisse pas la compréhension de l'endroit où l'objet irait
Corrigez-moi si je me trompe, mais il semble que vous obtiendriez le
travailleurs data pour une commande uniquement dans l'état de votre composant de l'application. Plutôt, vous voudriezthis.setstate (State => ({WeandsData: [... TravailleursData, NewworkerData]))