cuando uso fetch para traer la lista de notas y consol.log no aparece nada. La url no está mal, la he comprobado cuidadosamente. Aquí está el código:
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 NotesListPageaquí está la parte de la API:
@api_view(['GET']) def getNotes(request): notes = Note.objects.all() serializer = NoteSerializer(notes, many=True) return Response(serializer.data)No estás llamando a tu función 'getNotes'
La forma en que lo haría, sería para obtener sus datos en el gancho de Efecto y establecerlo en su gancho de estado allí.
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*Editar
Más limpio sería tener la búsqueda en una función separada haciendo lo mismo y simplemente llamando a esa función en su gancho de efecto (vea otra respuesta anterior *)
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