如何在React context API中调用与调用函数并行的函数

const MyContext = React.createContext();

class MyProvider extends React.Component {
  state = {
    data: '',
  };

  myFunction = () => {
    // 并行的函数逻辑
  };

  render() {
    return (
      <MyContext.Provider
        value={{
          data: this.state.data,
          myFunction: this.myFunction,
        }}
      >
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

class MyComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(context) => (
          <div>
            <p>Data: {context.data}</p>
            <button onClick={context.myFunction}>Call Function</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}