Demande d'OBTENIR dans React.js pour un serveur

J'ai un SearchBar et un Profile composant et je veux faire une requête GET au serveur: http://awesomeserver/users. Les données du serveur sont dans un tableau d'objets. Je veux être en mesure de saisir un nom d'utilisateur dans la barre de recherche et lorsque je clique sur "Recherche", je veux afficher que l'utilisateur prénom, nom et e-mail sur la page. Par exemple, quand je fais une recherche pour jsmith, je veux afficher: prénom: Jean Nom de famille: Smith, e-mail: [email protected]. Pour ce faire, j'ai besoin de passer comme props à la Profile composant. Je suis à l'aide d'axios faire la demande, mais je pense que je ne suis pas à l'utiliser correctement. Comment puis-je effectuer une recherche par nom d'utilisateur, mais seulement de récupérer le nom, prénom et e-mail?

C'est ce qu'un échantillon de données pourrait ressembler dans le serveur:

{
  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: jsmith@gmail.com,
  hobby: hiking,
  id: 1
}

C'est mon code pour l'instant:

//Profile Component
import React, { Component } from 'react';
class Profile extends Component {
render() {
return (
<div>
<div>First Name: {this.props.firstName}</div>
<div>Last Name: {this.props.lastName}</div>
<div>Email: {this.props.email}</div>
</div>
);
}
}
export default Profile;
//SearchBar component
import React, { Component } from 'react';
import axios from 'axios';
import Profile from './Profile';
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
fetchUser: {
username: '',
firstName: '',
lastName: '',
email: '',
hobby: ''
}
}
this.fetchUser = this.fetchUser.bind(this);
}
fetchUser() {
var id = this.refs.id.value;
axios.get('http://awesomeserver/users/${id}')
.then(resp => resp.json()) 
.then( (response) => {
console.log(response);
this.setState({
fetchUser: response.data
});
})
.catch( (error) => {
console.log(error);
});  
}
render() {
return (
<div>
<input ref="id" placeholder="Enter in a username" />
<button onClick={this.fetchUser}>Search</button>
<Profile firstName={this.fetchUser.firstName} lastName={this.fetchUser.lastName} email={this.fetchUser.email} />
</div>
);
}
}
export default SearchBar;

InformationsquelleAutor slammer | 2017-05-19

3

La façon dont vous utilisez axios est incorrect ici, nous devons définir la valeur retournée pour les accessoires correctement, et nous avons également besoin de lier l'axios fonction de rappel correctement, par exemple, votre code devrait ressembler à:
```
import React, { Component } from 'react';
class Profile extends Component {
render() {
return (
<div>
<div>First Name: {this.props.firstName}</div>
<div>Last Name: {this.props.lastName}</div>
<div>Email: {this.props.email}</div>
</div>
);
}
}
export default Profile;
//SearchBar component
import React, { Component } from 'react';
import axios from 'axios';
import Profile from './Profile';
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
fetchUser: {
username: '',
firstName: '',
lastName: '',
email: '',
hobby: ''
}
}
this.fetchUser = this.fetchUser.bind(this);
}
fetchUser() {
axios.get('http://awesomeserver/users.username')
.then( (response) => {
console.log("response", response);
this.setState({
fetchUser: response.data
});
console.log("fetchUser", this.state.fetchUser);
})
.catch( (error) => {
console.log(error);
});  
}
render() {
return (
<div>
<input placeholder="Enter in a username" />
<button onClick={this.fetchUser}>Search</button>
<Profile firstName={this.state.fetchUser.firstName} lastName={this.state.fetchUser.lastName} email={this.state.fetchUser.email} />
</div>
);
}
}
export default SearchBar;  
```
Veuillez également consulter les response dans la console, assurez-vous que vous avez obtenu le bon objet. Merci de poster ici quelques erreurs dans la console, le cas échéant, merci!
- J'ai essayé ta solution et la response est un objet, et les données de propriété est le tableau d'objets. Qui est au travail, mais j'ai un message d'erreur 404 quand j'ai essayé de faire de la recherche. Cela se produit uniquement quand j'ai essayé de chercher des noms comme John Smith, Jane Doe, etc. Aussi, je n'ai pas été en mesure de récupérer les données correctes comme de nom et de prénom. Est-ce parce que response n'est pas l'objet du tableau d'? Comment pourrais-je le récupérer uniquement le nom d'utilisateur de données qui correspondent à la barre de recherche?
- J'ai juste changé le axios rappel un peu, s'il vous plaît essayer de nouveau! Il semble que la première ".alors()" sera de retour http reaponse objet, nous nous devons de les convertir en json en premier. Cependant, avez-vous vu quoi que ce soit sur la console, la réponse de l'objet ou d'autres erreurs?
- Si la réponse est un objet avec les données de la clé, puis utiliser "réponse.les données" plz. Au sujet de votre recherche de retour 404, ce qui signifie que votre api n'a pas pu être trouvé, ou peut-être vous pouvez mettre à niveau votre api, si les utilisateurs essaient de chercher des noms qui n'existent pas, vous devez renvoyer des données factices, ou de retour "has_data: false" (ajout de résultat json)
- Je viens de réaliser que l'objet a id et que je devrais être à la recherche par id et non par leur nom. Je n'ai pas eu plus 404 erreur. Je m'excuse pour la confusion que vous. Comme pour l'objet de réponse, je n'ai cependant eu une erreur différente. C'est l'erreur: TypeError: resp.json is not a function. J'ai même essayé de le changer pour resp.data.json() et obtenu la même erreur sauf qu'il est resp.data.json is not a function. Savez-vous quelle est la cause? Aussi, j'ai mis à jour mon code dans le post original pour correspondre à tous les changements qui ont été apportés.
- OK, alors, si l'API retourne bien maintenant, merci donc de revenir à ma version précédente, mais avec la liaison la "réponse.les données" pour notre "fetchUser" (voir mon modifiée réponse ci-dessus). Si cela ne fonctionne toujours pas encore, n'hésitez pas à me montrer ce que la "réponse" et "ce.état.fetchUser" vraiment de retour (que j'ai utilisé de la console.journal de le capturer)
- Khatri Avez-vous fait ce travail encore? Si pas encore, je peut modifier le code pour utiliser fetch ou quelque chose comme ça pour le faire fonctionner dans votre cas!
- Il est aujourd'hui. J'apprécie l'aide. J'ai fait le travail avec axios.
- Oh vraiment, heureux vous avez fait. Si il n'y a plus d'erreurs, alors pourriez-vous s'il vous plaît envisager un upvote ainsi que d'accepter ma réponse, merci?
InformationsquelleAutor thinhvo0108

Vous pouvez faire un axios demande comme ça. Axios résultat est asynchrone et il ne reviendra pas vous le résultat de la fonction, de sorte this.fetchUsers.firstName etc est dénuée de sens. Appel de la fonction et de sauvegarder le résultat dans l'état de l'axios de rappel comme

class SearchBar extends Component {
state = {
firstName: '',
lastName: '',
email: ''
}
fetchUser = () => {
axios.get('http://awesomeserver/users.username')
.then(res => {
return res.json()
}).then(response => {
this.setState({firstName: response.firstName, lastName: response.lastName, email: response.email})
})
}
render() {
return (
<div>
<input placeholder="Enter in a username" />
<button onClick={this.fetchUser}>Search</button>
<Profile firstName={this.state.firstName} lastName={this.state.lastName} email={this.state.email} />
</div>
);
}
}
export default SearchBar;

InformationsquelleAutor Shubham Khatri

Vous appelez fetchUsers fonction sur le clic du bouton de recherche, de sorte qu'au lieu de retourner la réponse de définir les données à variable d'État en utilisant setState, lorsque vous ne setState réagir re-rendre le composant et il va passer les données de profil de Profil de la composante.

Écrire le barre de recherche composant comme ceci:

class SearchBar extends Component {
constructor(){
super();
this.state = {
profileDetails: {}
}
this.fetchUser = this.fetchUser.bind(this);
}
fetchUser() {
axios.get('http://awesomeserver/users.username')
.then((response) => {
this.setState({profileDetails: response.data})
})
.catch((error) => {
console.log(error);
});
}
render() {
return (
<div>
<input placeholder="Enter in a username" />
<button onClick={this.fetchUser}>Search</button>
<Profile {...this.state.profileDetails} />
</div>
);
}
}

Vérifier la DOC pour plus de détails sur {...}.

face à toute question dans ce domaine ?

InformationsquelleAutor Mayank Shukla

Vous devez vous connecter pour publier un commentaire.