Невозможно отобразить данные из ответа GET (управляемого в Django) REST API в React

У меня проблема с тем, что данные не отображаются из ответа API в React, хотя я их получаю.

У меня есть следующий компонент "Admin-Notification":

Здесь вы можете увидеть, что у меня есть два состояния: state и state2. "this.state" - это жестко закодированный вариант данных, которые поступают из API, а "this.state2" - это данные, поступившие из API.

Вот изображение console.log() из render(), где первое "events" принадлежит "state", а второе - "state2":

Вот как выглядит сайт, если мы создадим карту, используя "state":

const {events} = this.state;
        return(
            <main className="mw6 center main">
                {
                    events.map((event)=>{
                    ...

Фотография:

Все в порядке, именно так я хочу, чтобы выглядел сайт.

А вот как это выглядит, если использовать данные из API:

const {events} = this.state2;
        return(
            <main className="mw6 center main">
                {
                    events.map((event)=>{
                    ...

Фотография:

Вот вызовы API:

Я также могу предоставить вам код бэкенда.

Вид API:

@api_view(['GET'])
def getevents(request):
    if request.method == "GET":
        events = Event.objects.all()
        serializer = EventSerializer(events, many=True)
        return Response(serializer.data)

Да, я позаботился о том, чтобы не было перезаписи. Это единственное представление для этого пути.

Вот сериализатор, который я использовал:

class EventSerializer(serializers.ModelSerializer):
    class Meta:
        model = Event
        fields = '__all__'

Вот модель "События":

class Event(models.Model):
    name = models.TextField()
    id_organizer = models.ForeignKey(User, on_delete=CASCADE, db_column='id_organizer')
    start_date = models.BigIntegerField()
    end_date = models.BigIntegerField()
    location = models.TextField()
    description = models.TextField()
    id_type = models.ForeignKey(EventType, on_delete=CASCADE, db_column='id_type')
    status = models.CharField(max_length = 50)
    class Meta:
        db_table="events"

Вот база данных таблицы, из которой я получаю данные:

Я сделал печать перед возвратом данных в Django. Вот результат:

@api_view(['GET'])
def getevents(request):
    if request.method == "GET":
        events = Event.objects.all()
        serializer = EventSerializer(events, many=True)
        print(serializer.data)
        return Response(serializer.data)

Изображение

Как вы могли заметить, API вызывается дважды. Я не могу объяснить, почему это происходит, но чтобы подтвердить это, если я добавлю console.log() внутри функции, которая вызывает API, и получу console.log() дважды, что означает, что функция вызывает дважды.

getEvents(){
        
        axios
            .get("http://127.0.0.1:8000/api/getevents")
            .then(response =>{
                this.state2.events = response.data;
                console.log("test1");
            }) 
            .catch(err => console.log(err));
    };

Фотография:

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

А вот пути URL:

urlpatterns = [
    path('api/login', views.login),
    path('api/addevent', views.addevent),
    path('api/getevents', views.getevents),
]

Я пытался использовать тип Promise, разбирая разными способами данные и перемещая их в "state2", возвращая данные в render напрямую, но ничего не сработало.

constructor(){
        super();
        this.state = {
            events:[]
        }
    }
    componentDidMount(){
        axios
        .get("http://127.0.0.1:8000/api/getevents")
        .then(response =>{
            this.setState({events: response.data});
        }) 
        .catch(err => console.log(err));
    }

getEvents(){
  axios
    .get("http://127.0.0.1:8000/api/getevents")
    .then(response =>{
      this.setState({events:response.data})
      console.log("test1");
    })
    .catch(err => console.log(err));
};