React组件useEffect仅文件修改后首次触发，重渲染时不执行问题

问题根源 #

你的useEffect依赖数组是空数组[]，这会让React判定该副作用没有任何依赖项，因此只会在组件首次挂载时执行一次。哪怕后续组件因为user状态变化、路由参数id变动导致重渲染，useEffect都不会再次触发。

修复方案 #

把useEffect中用到的所有外部变量加入依赖数组：user和id。这样当这两个变量发生变化时，useEffect会自动重新执行，重新发起请求获取最新数据。

另外，直接通过window.location.pathname.split获取id的方式不够可靠，建议使用React Router的useParams钩子（如果项目使用了React Router），确保路由参数变化能被React正确追踪。

修改后的代码 #

import useAuthContext from "../hooks/useAuthContext" 
import StockDetails from "./StockDetails"
import TableHeader from "./TableHeader"
import useStocksContext from '../hooks/useStocksContext'
import { useEffect, useState } from "react"
// 若使用React Router，导入useParams
// import { useParams } from 'react-router-dom'

const SingleStock = () => {

    console.log('SS RENDERED')

    const {user} = useAuthContext()
    const {stocks, dispatch} = useStocksContext()
    const [stock, setStock] = useState(null) // 初始设为null，便于判断是否获取到有效数据
    
    // 推荐用useParams获取路由id
    // const { id } = useParams()
    // 保留原有方式时，确保id变化能被检测
    const id = window.location.pathname.split('/')[1]

    useEffect(() => {
        // 未登录或无有效id时直接返回
        if (!user || !id) return

        const fetchStock = async () => {
            try {
                const response = await fetch(`/api/stocks/${id}`, {
                    headers: {
                        'Authorization': `Bearer ${user.token}`
                    }
                })
                // 处理请求失败场景
                if (!response.ok) throw new Error('请求股票数据失败')
                const json = await response.json()
                setStock(json)
            } catch (err) {
                console.error('获取数据出错:', err)
            }
        }

        console.log('hey there')
        fetchStock()
    }, [user, id]) // 加入依赖项，触发useEffect重新执行

    console.log(stock)
    
    return (
        <div>
            <TableHeader/>
            {/* 用_id判断是否有有效数据，避免空对象导致的错误渲染 */}
            {stock?._id && <StockDetails 
                key={stock._id}
                stock={stock}
            />}
        </div>
    )
}

export default SingleStock

额外优化点 #

1. 将初始stock状态从{}改为null，这样stock?._id能准确判断是否获取到有效数据（空对象在JavaScript中属于真值，stock && ...会始终返回true）。
2. 给异步请求添加错误捕获，避免请求失败引发未处理异常。
3. 若项目使用React Router，务必用useParams获取路由参数，这是官方推荐的路由参数获取方式，能保证路由变化时组件正确响应。

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