web-dev-qa-db-fra.com

Demande GET dans React.js à un serveur

J'ai un SearchBar et un Profile composant et je veux faire une demande GET au serveur: http://awesomeserver/users. Les données sur le serveur sont dans un tableau d'objets. Je souhaite pouvoir saisir un nom d'utilisateur dans la barre de recherche et lorsque je clique sur "Rechercher", je souhaite afficher le prénom, le nom de famille et l'adresse électronique de cet utilisateur sur la page. Par exemple, lorsque je recherche jsmith, je souhaite afficher: Prénom: John, Nom: Smith, email: [email protected]. Pour ce faire, je dois les transmettre en tant que props au composant Profile. J'utilise axios pour faire la demande, mais je pense que je ne l'utilise pas correctement. Comment puis-je effectuer une recherche par nom d'utilisateur, mais uniquement en récupérant le nom, le prénom et l'adresse de messagerie?

Voici à quoi ressemblerait un exemple de données sur le serveur: 

{
  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: [email protected],
  hobby: hiking,
  id: 1
}

Ceci est mon code jusqu'à présent: 

//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;
javascriptreactjsget
4
slammer

La façon dont vous utilisez axios est incorrecte ici, nous devons définir correctement la valeur renvoyée sur props et nous devons également lier correctement la fonction de rappel axios. Par exemple, votre code doit ressembler à ceci:

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 vérifier la response dans la console pour vous assurer que vous avez le bon objet. S'il vous plaît poster ici quelques erreurs de la console le cas échéant, merci!

3
thinhvo0108

Vous pouvez faire une requête axios comme ça. Le résultat Axios est asynchrone et il ne vous retournera pas le résultat de la fonction, donc this.fetchUsers.firstName etc n'a pas de sens. Appelez la fonction et enregistrez le résultat à l’état dans le rappel axios 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;
0
Shubham Khatri

Vous appelez la fonction fetchUsers en cliquant sur le bouton de recherche. Ainsi, au lieu de renvoyer la réponse, définissez les données dans la variable State à l'aide de setState, lorsque vous effectuez setState rea, le rendu est restitué et les données de profil sont transmises au composant Profile.

Ecrivez le composant SearchBar 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>
      );
   }
}

Consultez le DOC pour plus de détails sur {...}.

0
Mayank Shukla