fetch 不带任何数据

Question

当我使用 fetch 来获取笔记列表和 consol.log 时，它什么也没显示。网址没有错，我仔细检查过。代码如下：

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)

Answer 1

你没有调用你的函数'getNotes'

我会这样做，它在 Effect 挂钩中获取您的数据并将其设置在您的状态挂钩中。

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

*编辑

更清洁的方法是让一个单独的函数中的 fetch 做同样的事情，然后在你的效果挂钩中调用该函数（参见上面的其他答案*）

Answer 2

    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