This.context всегда пуст в React, contextApi

test.js

export default class TestScreen extends React.Component {
    static contextType= AppProvider;

    componentDidMount() {
        console.info('test',this.context);
    }
  
  render() {
    return (
      <AppConsumer>
        { (context) => (
           <p>{context.favoriteAnimal}</p>
        )}
      </AppConsumer>
      
    )
  }
}

store.js

   

const initialState = {
  favoriteAnimal: "cow",
};

   

export const AppContext = React.createContext();
export const AppConsumer = AppContext.Consumer;

export class AppProvider extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = initialState;
  }
    
  render() {
    return (
      <AppContext.Provider value = {{
        favoriteAnimal: this.state.favoriteAnimal,
      }}>
        {this.props.children}
      </AppContext.Provider>
    );
  }

}

зависимости: { "реагировать": "^16.8.4", "react-dom": "^16.8.4", "реагировать-скрипты": "2.1.8" },

this.context пуст {}, в test.js. Не могу найти выход, буду рад любой помощи. Спасибо

javascript reactjs

09.03.2019 09:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

696

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема в том, что вы назначаете ContextTypeAppProvider, который является вашим компонентом, вместо контекста, возвращаемого React.createContext. После внесения этого изменения вам даже не нужно использовать AppConsumer внутри метода рендеринга.

export default class TestScreen extends React.Component {
    static contextType= AppContext;

    componentDidMount() {
        console.info('test',this.context);
    }

  render() {
    return (
        <p>{this.context.favoriteAnimal}</p>
    )
  }
}

как this.context указывает на правильный контекст, потому что в вашем классе вы ничему не присвоили контекст

— 09.03.2019 10:21

@vikrant, мы назначили static contextType= AppContext; в классе, что и нужно, чтобы указать на правильный контекст. Это изменение было введено в React v16.6.0.

— 09.03.2019 10:23

но вы определяете contextType не контекст, так откуда он знает, что это правильный контекст

— 09.03.2019 10:50

@vikrant, это то, как это предписывают реагирующие документы. Вы должны использовать 'contextType'.

— 09.03.2019 11:10

@ Speedy11 о, я думал, что это просто какая-то случайная величина. Спасибо

— 09.03.2019 11:20

09.03.2019 10:11