如何访问react Context.Provider值内的另一个函数？

Question

At the moment, I learn how to use react context API. I have a react Provider class, with some state data and functions in the value={} . How can I access a function inside this value from another function inside this value?

So, the function1() is called by a child component. When the state change is finished, I want to call the function2() and access the new state.

Is it possible in react to get something like this?:

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>
    }
  }
}

If I try to run this, and fire the function1() from the child, it gives me

I don't understand, why it is trying to access a _this2 variable, because I defined it to access this.function2() .

Is it just not possible to do what I want in react? You might say, why the function2() is an extra function, and why I don't add the code in the end of the function1() . It's because the function2() has to be a independent accessable function.

Can anyone help me? Thanks!

Answer 1

What you can try to do is this:-

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>
    }
  }
}