this.context, возвращающий пустой объект - PullRequest
Новая
       19

this.context, возвращающий пустой объект

1 голос
/ 09 апреля 2019

Я впервые настраиваю 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();

someNestedComponent.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.log(this.context);
  }

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

export default someNestedComponent;

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

  • Реакция 16.8.6 (надеюсь увидеть сообщения об ошибках в коде, но не получил никаких предупреждений)
  • React-DOM 16,7.0
  • React-Redux 6.0.1

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

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

ref: https://reactjs.org/docs/context.html#contextconsumer

1 голос
/ 09 апреля 2019

Проблема в том, что 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.log(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.log(this.props.config);
  }
  ...
}
...