This.context возвращает пустой объект

Я впервые настраиваю ContextApi в рабочем приложении, надеясь заменить им нашу текущую обработку конфигураций нашего приложения. Я следил за официальной документацией и консультировался с похожими проблемами, с которыми сталкиваются другие люди с API, и довел его до точки, где я могу правильно настроить конфигурацию, когда я делаю Config.Consumer и обратный вызов в функциях рендеринга. Однако я не могу заставить this.context возвращать что-либо, кроме пустого объекта.

В идеале я бы использовал this.context в методах жизненного цикла и чтобы избежать ада обратных вызовов, поэтому помощь будет оценена по достоинству. Я дважды проверил свою версию React и устанавливаю contextType. Ниже приведено представление кода

config.js

import { createContext } from "react";
export default createContext();

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Router, browserHistory } from "react-router";
import { syncHistoryWithStore } from "react-router-redux";
import Config from "../somePath/config";
// more imports


function init() {
  const config = getConfig();
  const routes = getRoutes(config);
  const history = syncHistoryWithStore(browserHistory, appStore);

  ReactDOM.render(
    <Provider store = {appStore}>
      <Config.Provider value = {config}>
        <Router history = {history} routes = {routes} />
      </Config.Provider>
    </Provider>,
    document.getElementById("app")
  );
}
init();

некоторые вложенные компоненты.js

import React, { Component } from "react";
import { connect } from "react-redux";
import Config from "../somePath/config";

@connect(
  state => ({
    someState: state.someState,
  })
)
class someNestedComponent extends Component {
  componentDidMount() {
    console.info(this.context);
  }

  render() {
    return (...someJSX);
  }
}
someNestedComponent.contextType = Config;

export default someNestedComponent;

В настоящее время работает на:

  • Реагировать 16.8.6 (надеюсь, чтобы увидеть сообщения об ошибках о обходном коде, но предупреждений не было)
  • Реагировать-DOM 16.7.0
  • Реакт-редукс 6.0.1
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
822
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема в том, что someNestedComponent не относится к классу, в котором используется this.context:

someNestedComponent.contextType = Config;

Это относится к функциональному компоненту, который обертывает исходный класс, потому что он был украшен декоратором @connect, это синтаксический сахар для:

const someNestedComponent = connect(...)(class someNestedComponent extends Component {
  ...    
});
someNestedComponent.contextType = Config;

Вместо этого должно быть:

@connect(...)
class someNestedComponent extends Component {
  static contextType = Config;

  componentDidMount() {
    console.info(this.context);
  }
  ...
}

С контекстным API нет проблем с адскими обратными вызовами; это удобно решается с помощью того же шаблона компонента более высокого порядка, который используется в React Redux, и также может быть полезен синтаксис декоратора:

const withConfig = Comp => props => (
  <Config.Consumer>{config => <Comp config = {config} {...props} />}</Config.Consumer>
);
@connect(...)
@withConfig
class someNestedComponent extends Component {
  componentDidMount() {
    console.info(this.props.config);
  }
  ...
}

Это был отличный ответ — он дал мне возможность обсудить с моей командой, какой подход мы предпочитаем, и в итоге мы использовали синтаксис общедоступного класса. Спасибо!

Sergey Kolchinskiy 09.04.2019 17:30

Рад, что это помогло.

Estus Flask 09.04.2019 17:49

Вы не использовали consumer для получения значений

ссылка: https://reactjs.org/docs/context.html#contextconsumer

Другие вопросы по теме