Блог

Главная - Вопросы по программированию - this.context всегда пуст в React, contextApi

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

#javascript #reactjs

#javascript #reactjs

Вопрос:

test.js

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

    componentDidMount() {
        console.log('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>
    );
  }

}

зависимости: {
«react»: «^16.8.4»,
«react-dom»: «^16.8.4»,
«react-scripts»: «2.1.8»
},

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

Ответ №1:

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

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

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

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

Комментарии:

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

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

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

4. @vikrant, именно так это предписывается в документах react. Вы должны использовать ‘ContextType’.

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