React中fetch请求未执行，如何获取API数据？

你的代码存在几个关键错误，导致API请求未执行、数据无法正常展示：

1. useEffect 语法错误
   你错误地将useEffect写成了赋值语句useEffect=( () => { ... })，正确写法是直接调用useEffect函数，这样组件挂载或依赖项变化时才会触发回调逻辑。

2. useParams 使用错误
   useParams()返回的是包含路由参数的对象，直接赋值给noteId会得到一个对象而非具体的ID值。需要解构出对应参数，比如路由定义为/notes/:noteId，就用const { noteId } = useParams()。

3. 初始状态与渲染逻辑问题
   你把note的初始状态设为数组[]，但API返回的应该是单个笔记对象。初始值改为null或空对象{}，渲染时先判断数据是否存在，避免显示空内容。

4. 注释语法错误
   JavaScript中注释应使用//或/* */，而非Python的#，虽然不影响执行，但不符合语法规范。

修正后的代码 #

import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'

const NotePage = () => {
    // 解构获取路由参数
    const { noteId } = useParams()
    // 初始状态设为null，匹配单个笔记对象的返回格式
    const [note, setNote] = useState(null)

    // 正确调用useEffect
    useEffect(() => {
        getNote()
    }, [noteId])

    const getNote = async () => {
        // 获取笔记数据
        try {
            const response = await fetch(`/api/notes/${noteId}/`)
            // 检查请求是否成功
            if (!response.ok) {
                throw new Error('请求失败')
            }
            const data = await response.json()
            console.log("Data:", data)
            setNote(data)
        } catch (err) {
            console.error('获取数据出错:', err)
        }
    }

    return (
        <div>
            {/* 数据未加载时显示占位文本，加载完成后展示对应字段 */}
            <h1>Single {note ? note.title : '加载中...'}</h1>
            {/* 若需展示更多内容，比如笔记正文 */}
            {note && <p>{note.content}</p>}
        </div>
    )
}

export default NotePage

修复说明 #

• 修正useEffect语法后，组件挂载或noteId变化时会自动触发API请求。
• 正确解构useParams后，请求URL会带上合法的ID，确保API能正确处理请求。
• 添加try/catch捕获请求异常，便于调试网络或API错误。
• 渲染时增加状态判断，避免数据未加载完成时显示空内容或错误信息。

内容的提问来源于stack exchange，提问作者Darshan Pahilwani