React详情页fetch内setState不生效，仅刷新页面后才正常？

问题描述 #

点击列表项跳转至/:id详情页，详情组件中通过接口请求获取对应ID的数据并更新状态，但调用setCavallo(data)后立即执行console.log(cavallo)输出的是空对象；修改文件保存触发热重载后，状态才会更新并正常渲染页面。

用户提供的组件代码：

const [cavallo, setCavallo] = useState({})

 const {idCavallo} = useParams()


let getCavallo = async () => {
    try {
        let response = await fetch(`http://localhost:5001/cavalli/${idCavallo}`)
        if(response.ok) {
            let data = await response.json();
             setCavallo(data)
             console.log(cavallo)
       
        } else {
            console.log("something went wrong")
        }
       
    } catch (error) {
        console.log(error)
    }
}

     useEffect(() => {
   
    getCavallo()
    console.log(cavallo)
     }, []);

问题原因 #

1. useState的异步更新特性：React中useState的状态更新函数是异步的，调用setCavallo(data)后，状态不会立刻更新，所以紧接着的console.log(cavallo)拿到的还是更新前的空对象。
2. useEffect依赖缺失：当前useEffect的依赖数组为空，只会在组件首次挂载时执行一次。当从列表跳转到不同ID的详情页时，路由参数idCavallo发生变化，但useEffect不会重新触发，也就不会重新请求对应ID的数据。而修改文件保存触发热重载时，组件重新挂载，此时idCavallo是最新的，所以能正确获取数据。

解决方法 #

1. 解决setState后无法立即获取新值的问题 #

• 直接打印接口返回的data：data是刚从接口拿到的最新数据，能直接看到正确结果；
• 通过useEffect监听cavallo状态变化，等状态更新完成后再执行打印或后续逻辑。

2. 修复useEffect的依赖问题 #

将idCavallo加入useEffect的依赖数组，这样当路由参数变化时，useEffect会自动重新触发，调用getCavallo获取对应ID的数据。

修改后的代码示例 #

const [cavallo, setCavallo] = useState({})
const { idCavallo } = useParams()

// 建议将函数声明为const，避免变量提升问题
const getCavallo = async () => {
    try {
        const response = await fetch(`http://localhost:5001/cavalli/${idCavallo}`)
        if (response.ok) {
            const data = await response.json();
            setCavallo(data)
            // 直接打印接口返回的最新数据
            console.log(data)
        } else {
            console.log("请求出错")
        }
    } catch (error) {
        console.log(error)
    }
}

// 添加idCavallo到依赖数组，参数变化时重新请求数据
useEffect(() => {
    getCavallo()
}, [idCavallo]);

// 监听cavallo状态，更新完成后执行操作
useEffect(() => {
    console.log("更新后的cavallo：", cavallo)
}, [cavallo])

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