![](/img/trans.png)
[英]React Native Context - retrieve the value from Context.provider outside of the render function
[英]How can I access another function inside the react Context.Provider value?
目前,我学习了如何使用react context API。 我有一个react Provider类,在value={}
有一些状态数据和函数。 如何从该值内的另一个函数访问该值内的函数?
因此, function1()
由子组件调用。 状态更改完成后,我想调用function2()
并访问新状态。
是否有可能做出这样的反应?:
class Provider extends Component {
state = {
foo: 'bar'
}
render() {
return() {
<Context.Provider value={{
state: this.state,
function1: () => {
this.setState({ foo: 'changed' }, () => {
// HERE I WANT TO CALL THE NEXT FUNCTION IN THIS VALUE
this.function2()
});
},
function2: () => {
// called by function1 after state change
console.log(this.state)
}
}}>
{ this.props.children }
</Context.Provider>
}
}
}
如果我尝试运行此代码,并从孩子那里触发function1()
,它将给我
TypeError: _this2.function2() is not a function
我不明白,为什么它要尝试访问_this2
变量,因为我定义了它来访问this.function2()
。
只是不可能做我想做的事情吗? 您可能会说,为什么function2()
是一个额外的函数,为什么我不在function1()
的末尾添加代码。 这是因为function2()
必须是一个独立的可访问函数。
谁能帮我? 谢谢!
您可以尝试做的是:
class Provider extends Component {
state = {
foo: 'bar'
}
an_independent_function() {
console.log(this.state);
}
render() {
return() {
<Context.Provider value={{
state: this.state,
function1: () => {
this.setState({ foo: 'changed' }, () => {
// HERE I WANT TO CALL THE NEXT FUNCTION IN THIS VALUE
this.an_independent_function();
});
},
function2: this.an_independent_function.bind(this)
}}>
{ this.props.children }
</Context.Provider>
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.