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: [email protected].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