1
votes

Comment puis-je utiliser un état dans une URL pour créer un get en utilisant axios dans reactjs

J'utilise axios en réaction pour obtenir des informations d'un backend django, j'obtiens les données utilisateur et je les stocke dans un état dans le composant mais je souhaite utiliser l'un des attributs de l'état user_data dans l'url d'un autre get pour obtenir plus d'informations du backend, je ne sais pas si je l'ai bien expliqué mais voici le code:

state = {
    user_data: [],
    classes: []
  }
  
  componentDidMount() {
    const config = {
      headers: {
          'Content-Type': 'application/json',
          'Authorization': `JWT ${localStorage.getItem('access')}`,
          'Accept': 'application/json'
      }
    };
    axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config)
      .then(
        res => {
          this.setState({
            user_data: res.data
          });
        }
      )     
    const myString = this.state.user_data.SectionNumber
    axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Classes/${myString}`, config)
      .then(
        res => {
          this.setState({
            classes: res.data
            });
            console.log(res.data);
         }
      ) 
  }

Je ne sais pas comment changer l'objet d'état en quelque chose que axios peut comprendre et utiliser dans l'url

javascript reactjs axios

2 commentaires

y a-t-il une erreur à laquelle vous faites face?

Vous devez passer le deuxième appel pour récupérer les détails de la classe en tant que rappel au premier setState.

4 Réponses :

1
votes

À ce stade, lorsque vous récupérez les données relatives à l'utilisateur, vous n'avez pas besoin de dépendre de l'état. Vous pouvez passer le deuxième appel en tant que rappel au premier setState afin qu'il puisse le mettre à jour lorsque la promesse se résout et que l'état a été mis à jour.

axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config)
    .then(
        res => {
            this.setState({
                user_data: res.data
            });
        }, () => {
            const myString = this.state.user_data.SectionNumber
            axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Classes/${myString}`, config)
                .then(
                    res => {
                        this.setState({
                            classes: res.data
                        });
                        console.log(res.data);
                    }
                )
        }
    )

1 commentaires

Cela a fonctionné mais pas exactement comme vous l'avez dit, je vais mettre le code comme réponse si quelqu'un en a besoin à l'avenir

0
votes

Vous n'avez pas besoin de définir l'état, puis de prendre l'état pour utiliser ce paramètre dans votre URL. Vous pouvez utiliser des promesses et du code pseudo-synchrone async / await et cela devrait vous aider.

 async componentDidMount() {
  const config = {
     headers: {
        'Content-Type': 'application/json',
        'Authorization': `JWT ${localStorage.getItem('access')}`,
        'Accept': 'application/json'
     }
  };
  const userDataResponse = await axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config)
  const myString = userDataResponse.data.SectionNumber;
  const classesResponse = await axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Classes/${myString}`, config)
  this.setState({
     user_data: userDataResponse.data,
     classes: classesResponse.data
  });
}

0 commentaires

0
votes

C'est le code qui a fonctionné avec moi

axios.get(`${process.env.REACT_APP_API_URL}/auth/users/me/`, config)
      .then(
        res => {
          this.setState({
            user_data: res.data
          });
          const SectionNumber = this.state.user_data.SectionNumber
          axios.get(`${process.env.REACT_APP_API_URL}/Elearning/Classes/${SectionNumber}`, config)
            .then(
              res => {
                this.setState({
                  classes: res.data
                });
              }
            )
        } 
      )

0 commentaires

0
votes

Je suis également confronté à un problème similaire et j'ai fait exactement comme vous l'avez montré mais je ne vois pas les résultats.

 axiosInstance.get('/user/profile/' + this.state.adminCard).then(response => {
                    axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;  
                    this.setState({
                        fullName: response.data.lastName + ", " +  response.data.firstName,
                        diploma:  response.data.diploma,
                        projectSlug:  response.data.project
                    })
                }, () => {
                    const slug = this.state.projectSlug;
                    axiosInstance.get('/user/project/' + slug).then(response => {
                        axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;  
                        this.setState({
                            assignedProjectName: response.data.projectName,
                            assignedProjectDesc: response.data.projectDesc,
                            assignedProjectSupervisor: response.data.projectSupervisor
                        })
                        console.log(this.state.assignedProjectName)
                    })
                })

Sur la ligne où je console.log (this.state.assignedProjectName), je ne reçois même pas de retour, merci de nous conseiller.

0 commentaires