Блог

Немного сложно объяснить мою проблему, но я надеюсь, что кто-нибудь сможет помочь, у меня есть контекст, из которого я получаю объекты, и я использую .map() для использования карточек и отображения данных, например:

 const { user_data, classes } = this.context;
        return(
          <div className="App">
              
              <h1>Hello, {user_data.first_name}</h1>
              <Container className= "MainContainer" style={{marginTop: "30px", marginLeft: "10%", width: "80%"}}>
                  <Row>
                    {classes.map(Class => {
                        <Link 
                            to={{
                                pathname : `/Class/${Class.Name}`,
                                state: {
                                Name: Class.Name, 
                                ClassNumber: Class.CLassNumber,
                                identification: Class.Identification
                                }
                            }}
                        >
                            <Col className="col-md-4" >
                                <Card style={{ width: '18rem', zIndex: '0', marginTop:"20px" }}>
                                    <Card.Body>
                                        <Card.Title>{Class.Name}</Card.Title>
                                        <Card.Subtitle className="mb-2 text-muted"> 

                                        </Card.Subtitle>
                                    </Card.Body>
                                </Card>
                            </Col>
                        </Link>
                    })}
                  </Row>
              </Container>
          </div>
 

И я также использовал .map() с классами, которые я получил из контекста, чтобы использовать метод get() из axios и получать данные из api, честно говоря, я не знаю, правильно ли я это сделал, но я сделал это так:

 componentDidMount() {
      const { classes } = this.context;
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `JWT ${localStorage.getItem('access')}`,
                'Accept': 'application/json'
            }
        };
        {classes.map(Class => (
            axios.get(`${process.env.REACT_APP_API_URL}/Users/teacher/${Class.Teacher}`, config)
                .then(
                    res => {
                        this.setState(prevState => ({
                            TeacherName: [
                                ...prevState.TeacherName,
                                res.data
                            ]
                        })
                        );
                    }
                )
        ))}                         
      }
 

Теперь, если то, что я сделал, правильно, я хочу соединить каждый класс с соответствующим учителем, и я не могу сделать это в серверной части «django», потому что я использую внешний ключ для учителя, и он отправляет идентификатор учителя, а не имя, так как я могуподключите учителя, который я предположительно получаю из api в react, к классу, который я получаю из контекста??

Пожалуйста, помогите мне, я был бы очень признателен