Je veux que mon réact mais j'ai du mal à utiliser .map pour produire l'objet que je veux. Voici mon code: P> Render code> Pour retourner des objets d'une API de manière similaire à ce que je reçois de Postman. Par exemple: class Results extends Component {
constructor() {
super();
this.state = {
animals: [],
};
}
componentDidMount() {
var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
const API_KEY = process.env.REACT_APP_API_KEY;
fetch(url, {
method: 'GET',
headers: {
Authorization: API_KEY,
'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => this.setState({animals: data.results }))
}
render() {
return (
<div>
{this.state.animals.map(animal => <div>{animal.results}</div>)}
</div>
)
}
}
export default Results;
3 Réponses :
Si vous êtes sûr que les données JSON que vous obtenez sont correctes, vous pouvez boucler sur l'objet à l'aide du code suivant.
Object.keys(this.state.animals).map((key) => {
return <div value={key}>{ this.state.animals[key] }</div>
});
Le paramètre de la méthode de rappel nommé «données» ne signifie pas que c'est une propriété Je pense que le rappel doit être P> data code> des données de réponse. ...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))
<div>
{this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>
Yup je n'ai pas compris les "données" était quelque chose que je me définisais. Je dois trouver comment obtenir des clés de travailler (combinant votre réponse avec Parth Patel), mais au moins, je vois des données rendues que je peux travailler avec. Merci!
Je pense que cela vous confondre à cause d'une convention de dénomination légèrement déroutante que vous avez. Votre fonction composantDidDmount code> doit être suivie comme suit: render() {
console.log(this.state);
return (
<div>
{this.state.animals.map(animal => <div>{animal.attributes.name}</div>)}
</div>
)
}
alors (données => this.setstate ({animaux: data.results})) , selon votre JSON, il n'y a aucunrésultats dans le champ.Je connais! J'aurais dû clarifier cela mieux que j'ai essayé data.type ainsi qu'un niveau plus profond data.type.bréseds qui jettent les deux erreurs. Je n'aurais pas dû utiliser des résultats dans ma question.