Поиск не приносит никаких данных

Когда я использую fetch для получения списка заметок и consol.log, ничего не появляется. url не неправильный, я тщательно проверил его. Вот код:

import React, { useState, useEffect } from 'react'

const NotesListPage = () => {

    let [notes, setNotes] = useState([])

    useEffect(() => {

    }, [])

    let getNotes = async () => {
        let response = await fetch('http://127.0.0.1:8000/api/notes/')
        let data = await response.json()
        console.log(data)
        setNotes(data)
    } 

    return (
        <div>
            
        </div>
    )
}

export default NotesListPage

вот api часть:

@api_view(['GET'])
def getNotes(request):
    notes = Note.objects.all()
    serializer = NoteSerializer(notes, many=True)
    return Response(serializer.data)

Вы не вызываете свою функцию 'getNotes'

Как бы я это сделал, я бы получил ваши данные в хуке Effect и установил их в вашем хуке State.

import React, { useState, useEffect } from 'react'

const NotesListPage = () => {

    let [notes, setNotes] = useState([])

    useEffect( async () => {
        const response = await fetch('http://127.0.0.1:8000/api/notes/')
            .then(response => response.json())
            setNotes(response)
    }, [])

    console.log(notes)

    return (
        <div>
            
        </div>
    )
}

export default NotesListPage

*Edit

Более чистым вариантом было бы иметь fetch в отдельной функции, делающей то же самое, и просто вызывать эту функцию в хуке эффекта (см. другой ответ выше*) 

    import React, { useState, useEffect } from 'react'

const NotesListPage = () => {

    let [notes, setNotes] = useState([])

    useEffect(() => {
         getNotes();
    }, [])

    let getNotes = async () => {
        let response = await fetch('http://127.0.0.1:8000/api/notes/')
        let data = await response.json()
        console.log(data)
        setNotes(data)
    } 

    return (
        <div>
            
        </div>
    )
}

export default NotesListPage
Вернуться на верх