Блог

Я использую axios в react для получения информации из серверной части django, я получаю пользовательские данные и сохраняю их в состоянии в компоненте, но я хочу использовать один из атрибутов в состоянии user_data в URL другого get, чтобы получить дополнительную информацию из серверной части, я не могу использовать данные пользователя в состоянии.не знаю, правильно ли я это объяснил, но вот код :

 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);
         }
      ) 
  }
  

Я не знаю, как изменить объект состояния на то, что axios может понять и использовать в URL

На этом этапе, когда вы извлекаете данные, связанные с пользователем, вам не нужно зависеть от состояния. Вы можете передать второй вызов в качестве обратного вызова первому setState, чтобы он мог обновить его, когда обещание будет выполнено и состояние будет обновлено.

 
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);
                    }
                )
        }
    )
  

Вам не нужно устанавливать состояние, а затем извлекать из состояния, чтобы использовать этот параметр в вашем URL. Вы можете использовать обещания и псевдосинхронный код async / await, и это должно помочь.

  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
  });
}  

Это код, который работал со мной

 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
                });
              }
            )
        } 
      )
  

Я также сталкиваюсь с аналогичной проблемой, и я сделал именно так, как вы показали, но я не вижу результатов.

  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)
                    })
                })  

В строке, где я console.log(this.state.assignedProjectName), я даже не получаю возврата, пожалуйста, посоветуйте.