Как я могу получить доступ к другой функции внутри контекста react.Значение поставщика?

#javascript #reactjs

Вопрос:

На данный момент я изучаю, как использовать react context API. У меня есть класс react Provider с некоторыми данными состояния и функциями в value={} . Как я могу получить доступ к функции внутри этого значения из другой функции внутри этого значения?

Итак, function1() вызывается дочерним компонентом. Когда изменение состояния завершено, я хочу вызвать function2() и получить доступ к новому состоянию.

Возможно ли в react получить что-то подобное?:

 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() .

Неужели просто невозможно сделать то, что я хочу в react? Вы можете сказать, почему function2() это дополнительная функция и почему я не добавляю код в конце function1() . Это потому function2() , что это должна быть независимая доступная функция.

Кто-нибудь может мне помочь? Спасибо!

1. измените обе функции со стрелками function1: () => на обычную функцию function function1 () {

2. @naga-elixir-jar Это невозможно, потому что функции находятся в объекте.

3. таким образом: function1: function() {}

4. @naga-elixir-jar тогда я получаю необработанное отклонение (TypeError): не удается прочитать свойство ‘setState’ неопределенного значения.

Ответ №1:

Что вы можете попытаться сделать, так это:-

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