Как вызвать функцию, присутствующую параллельно с вызывающей функцией в контекстном API React

Question

У меня есть функция update() в WebContextProvider, из которой я хочу вызвать другую функцию updateAgain(), которая также присутствует в WebContextProvider. Ниже приведен код для справки.

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        someState: 1,
    };

    render() {
        return (
            <WebContext.Provider
                value={{
                    data: ...this.state,
                    update: () => {
                       //call updateAgain() from here
                    },
                    updateAgain:() => {
                       //call this from update()
                    }
               }}
            >
                {this.props.children}
            </WebContext.Provider>
        );
    }
}

export default WebContextProvider;

Answer 1

Вы можете объявить функции над объявлением класса и предоставить их внутри значения поставщика контекста, или, если вам нужен доступ к состоянию, вам нужно будет определить их внутри вашего класса и отправить ссылки на методы.

Пример внешних функций:

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

const update = () => { /* Do something, you can call here updateAgain() */ };

const updateAgain = () => { /* Do something else */ };

export default class WebContextProvider extends Component {
    state = {
        someState: 1,
    };

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

Пример с методами класса, когда вам нужно использовать state:

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

export default class WebContextProvider extends Component {
    state = {
        someState: 1,
    };

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

    update = () => { /* Do something, you can call here this.updateAgain() or use this.state */ }

    updateAgain = () => { /* Do something else, you can use this.state here */ }
}

Answer 2

Вы можете использовать this.propertyName для ссылки на любое свойство в экземпляре объекта при условии, что вы используете обычный function вместо функции стрелки.

const ctxObject = {
  first: () => {
   console.log("first");
  },
  second: function() {
    console.log("second");
    this.first();
  }
}

ctxObject.second();