React中Lambda函数无法访问全局state的setCurrent问题排查

1. 闭包捕获旧引用：VictoryZoomVoronoiContainer的onClick是闭包函数，会捕获组件渲染时的GlobalState.setCurrent引用。若App组件重新渲染并调用globalState.register_state更新setCurrent，旧闭包仍持有之前的引用；加上React的setState函数带有内部绑定关联，直接存入全局实例后，在异步/闭包场景下可能失去关联，表现为空函数。
2. register时机错误：你在App组件顶层直接调用globalState.register_state，组件每次渲染都会执行该操作，可能在React渲染周期中，setCurrent未完全初始化就被存入全局实例，或多次覆盖导致引用混乱。
3. React setState函数的特殊性：useState返回的setCurrent是React内部包装的特殊函数，无法被structuredClone复制，直接存入全局实例会破坏其内部关联逻辑，引发失效问题。

方案1：修正全局实例的register时机 #

在App组件中用useEffect包裹register操作，确保仅在依赖项变化时执行，避免无效重复赋值：

const [current, setCurrent] = React.useState({})

React.useEffect(() => {
  globalState.register(current, setCurrent)
  // 组件卸载时清理引用，避免内存泄漏
  return () => {
    globalState.register(null, null)
  }
}, [current, setCurrent])

const state = {current: current, setCurrent: setCurrent}
return React.createElement(GlobalContext.Provider, {value: state},
    ...children
)

方案2：优先通过Context获取最新setCurrent #

既然已使用Context，直接在WebRequestsTimeChart组件中通过useContext获取最新的setCurrent，避免依赖全局实例的失效引用：

// WebRequestsTimeChart组件内部
import GlobalContext from './path/to/GlobalContext'

class WebRequestsTimeChart extends React.Component {
  render() {
    const { setCurrent } = React.useContext(GlobalContext)
    return (
      <VictoryChart
        containerComponent={
          <VictoryZoomVoronoiContainer
            onClick={() => {
              setCurrent(/* 新状态值 */)
            }}
          />
        }
      >
        {/* 图表内容 */}
      </VictoryChart>
    )
  }
}

方案3：重构全局状态管理（推荐） #

混合全局实例与Context的方式易引发引用问题，建议完全基于Context实现全局状态：

// GlobalContext.js
import React from 'react'

const GlobalContext = React.createContext()

export const GlobalProvider = ({ children }) => {
  const [current, setCurrent] = React.useState({})

  return (
    <GlobalContext.Provider value={{ current, setCurrent }}>
      {children}
    </GlobalContext.Provider>
  )
}

export default GlobalContext

在App中用GlobalProvider包裹子组件，需要状态的组件直接通过useContext获取，彻底规避全局实例的引用风险。

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