在 lambda 函数中无法访问 React setState

Question

我正在尝试使用React.useContext & React.useState在反应项目中定义全局状态。

我目前有这样的事情：

# GlobalState.js
class GlobalState extends AbstractState {
   register(current, setCurrent) {
      this.current = current
      this.setCurrent = setCurrent
   }
   ...
}

const globalState = new GlobalState()
export default globalState

这是从 App 通过类似的东西传递的：

const [current, setCurrent] = React.useState({})
globalState.register_state(current, setCurrent)
const state = {current: current, setCurrent: setCurrent}
return React.createElement(GlobalContext.Provider, {value: state},
    ...children
)

它在某些时候使用如下：

class WebRequestsTimeChart extends React.Component {

render(){
    ...
    return React.createElement(GlobalContext.Consumer, null, (state) => {
        return this.#getChart(state)
    })
}

componentDidMount() {
   console.log(GlobalState.setCurrent) // actual react dispatch content
}

componentWillUnmount() {
   console.log(GlobalState.setCurrent) // actual react dispatch content
}

#getChart(state) {
   console.log(GlobalState.setCurrent) // actual react dispatch content
   return React.createElement(VictoryChart, {
       ...
       containerComponent: React.createElement(VictoryZoomVoronoiContainer, {
           ...
           events: {
              onClick: (event) => {
                  console.log(state.setCurrent) // actual react dispatch content
                  console.log(GlobalState.setCurrent) // f(){} <--- ???
              }
           }
       }
   }
}

所以不知何故，传递给 onClick 的 lambda 无法访问GlobalState.setCurrent但访问state.setCurrent没有问题。 如果我定义另一个方法，如GlobalState.someRandomMethod ，它仍然可以通过onClick访问。 不知何故， React.useState返回的setCurrent似乎表现不同。 我还意识到无法复制此方法（例如， structuredClone不适用于此）。 我考虑的另一件事是Difference between class object Method declaration React? ，但我不确定这将如何导致GlobalState.setCurrent的行为有所不同。

在下面添加也不会改变这种行为：

    constructor(props) {
        super(props);
        this.getChart = this.getChart.bind(this).bind(GlobalState);
    }

如果您对发生的事情以及我如何在onClick中使用GlobalState.setCurrent有任何想法，请告诉我

Answer 1

GlobalState.setCurrent将是您尚未声明的类本身的静态方法。 它与setCurrent实例方法不同。

 class Foo { bar () { return 'bar'; } } console.log(Foo.bar?.()); // undefined. "bar" doesn't exist on the class itself. const foo = new Foo(); console.log(foo.bar()) // 'bar'; exists on instance of Foo. class Baz { static boom () { return "static boom"; } boom () { return "instance boom"; } } console.log(Baz.boom()); // static boom const baz = new Baz(); console.log(baz.boom()); // instance boom