Après une requête POST et GET réussie, les résultats de mon opération sont visibles dans la console de mes React Dev Tools. Comment dois-je prendre ces résultats, de préférence créer un tableau et afficher ce tableau sur mon application Web elle-même?
Voici la requête GET:
axios.get('http://localhost:5000/result')
.then((response) => {
console.log(response);
});
}
Le format des résultats affiché sur la console est comme ceci:
Disons que je veux créer un tableau en parcourant les résultats avec des en-têtes _id et nom. Je sais que je devrais utiliser la fonction de carte. Mais exactement où et comment dois-je faire cela dans mon code?
4 Réponses :
Vous avez quelques options. Vous pouvez passer votre appel dans componentDidMount, définir le résultat dans un état, puis afficher cet état.
componentDidMount() {
axios.get('http://localhost:5000/result')
.then((response) => {
this.setState({
data: response // maninpulate your response here
})
});
}
}
render() {
const { data } = this.state;
return this.renderTable(data) // this should return a table
}
Qu'y a-t-il avec componentDidMount ()? ne pourrai-je pas définir l'état sans lui? La raison étant que la requête axios est déjà appelée à l'intérieur d'une fonction opérant sur le clic d'un bouton.
Non, ce n'était qu'un exemple. Il n'était pas clair qu'il était appelé en cliquant sur un bouton. La solution @Bharanidhar Reddy est également bonne et meilleure si vous avez React 16.8. Si c'est sur le onClick, vous pouvez toujours définirState comme je l'ai montré. Assurez-vous simplement de mettre quelque chose comme this.onClickHandler = this.onClickHandler.bind (this) si vous rencontrez des problèmes pour accéder à l'état dans le constructeur du composant React.
Bonjour, j'ai essayé d'implémenter cette méthode et j'ai obtenu une erreur: TypeError: Impossible de détruire la propriété 'data' de 'this.state' car elle est nulle. Sauriez-vous pourquoi j'obtiens cette erreur?
En supposant que vous connaissez le concept de 'useState' dans les hooks de réaction. Si ce n'est pas le cas, comprenez-le bien.
En bref, useState est utilisé pour stocker les données dans des variables.
<table>
//some headers, if needed
//This will iterate your array of objects
{data.map((eachData) => (
<tr> <td>{eachData.id}</td>
<td>{eachData.name}</td>
....
</tr>
)
</table>
Au lieu de console.log ( response); vous définissez la réponse à la variable ie; setData(response);
En html,
const [data, setData] = useState();
Remarque: la partie HTML fonctionne aussi bien pour les classes Les composants React basés sur des fonctions où «useState» fait partie de la fonctionnalité des hooks de React, ne fonctionne que pour les composants basés sur des fonctions.
J'ai créé un petit exemple d'application où j'ai utilisé react-table pour afficher les données sous forme de tableau. De plus, dans cet exemple, j'ai ajouté une promesse afin de simuler la récupération des données du serveur par le serveur. Vous pouvez le remplacer par un appel de serveur réel, c'est-à-dire axis.get etc.
React-table fournit de nombreuses fonctionnalités qui pourraient être utiles. Par exemple, vous pouvez indiquer les colonnes que vous souhaitez afficher parmi toutes les colonnes des données.
Si vous ne souhaitez pas utiliser de bibliothèque pour afficher la table, il est également possible que vous deviez remplacer ReactTable par votre implémentation de table personnalisée.
J'espère que cela vous aidera.
Je ne sais pas pourquoi mais je ne peux pas "jouer" avec la variable de réponse de quelque manière que ce soit dans mon code. L'utilisation de console.log (réponse) imprime correctement la réponse sur la console, mais la définition de la réponse en tant que données d'état ou même l'impression de la réponse en tant que message d'alerte échoue. Je n'ai aucune idée de comment extraire les données de la variable de réponse ou pourquoi je suis confronté à ce problème.
Vous pouvez définir la réponse dans l'état en utilisant this.setState (() => ({data: response})) à l'intérieur de puis . Ainsi, partout où vous souhaitez y accéder, vous pouvez y accéder via this.state.data . J'ai fait la même chose dans l'exemple d'application que j'ai fourni dans la solution. Vous pouvez également consulter ici
J'ai regardé votre code et j'ai implémenté exactement la même chose, sauf que les données ne sont toujours pas remplies avec la valeur de la variable de réponse. Je ne sais pas où je me trompe!
Un doute quand appelez-vous l'API pour obtenir les données? Peut-être que si vous pouvez partager ce que vous faites, je peux vous aider.
Merci à cette page: https: // www.skptricks.com/2019/02/can-you-consolelog-in-jsx.html .
Vous pouvez faire console.log dans le render code> fonction d'un composant de classe ou dans l'instruction return d'un composant de fonction. Dans votre cas:
function Foo(props){
data = axios.get('http://localhost:5000/result')
return(
<>
{console.log(data)}
</>)
}
À mon avis, c'est beaucoup plus simple que les autres méthodes state .
Bonjour, je fais un projet similaire à celui-ci. Avez-vous résolu votre problème avec l'une des réponses ci-dessous? Je les ai tous essayés et je n'ai rien pu imprimer sur mon navigateur. Je suis assez nouveau pour réagir et je suis à ce problème depuis quelques jours, donc toute aide serait appréciée. Merci!
@webdesignnoob J'ai résolu le problème en éditant ma requête d'extraction comme suit: j'ai d'abord créé une variable 'data' dans mon état, puis j'ai défini des données égales au résultat de ma requête d'extraction en utilisant ---> fetch (' localhost: 5000 / result ', requestOptions) .then (response => response.json ()) .then (json => {console.log (json); this.setState ({données: Object.values (json)});}) .catch (err => {console.log (err)}); -----> Vous pouvez maintenant y accéder en utilisant this.state.data et faire ce que vous voulez.
Wow! Cela a très bien fonctionné et a du sens, merci beaucoup de m'avoir fait savoir comment vous avez résolu votre problème. Je suis coincé là-dessus depuis des jours! J'espère que votre projet fonctionne pour vous!
@webdesignnoob Heureux de vous aider.