我正在尝试使用React.useContext
&React.useState
在react项目中定义一个全局状态。
我目前有这样的东西:
# GlobalState.js
class GlobalState extends AbstractState {
register(current, setCurrent) {
this.current = current
this.setCurrent = setCurrent
}
...
}
const globalState = new GlobalState()
export default globalState
这是从应用程序传递的,如下所示:
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
,请告诉我
1条答案
按热度按时间ikfrs5lh1#
GlobalState.setCurrent
将是一个static method on the class itself,你还没有声明,它和setCurrent
示例方法不是一回事。