reactjs - ReactJS：在基于类的消费者组件中访问 this.context 时出现问题

问题描述

我在基于类的消费者组件中访问 this.context 时遇到问题。我有以下情况：

AppContext.js：

import React from "react";
const ContactContext = React.createContext();  // Create our context     
export default ContactContext;

数据提供者.js：

import React, { Fragment } from "react";
import AppContext from "./AppContext";

export default class DataProvider extends React.Component {
    state = {
        contacts: {
            contact1: { 
                id: 1,
                firstName: 'Test User FN',
                lastName: 'Test User LN'
            }
        }
    };
    render() {
        return (
            <>
            <AppContext.Provider value={{contacts: this.state.contacts}}>
                {this.props.children}       
            </AppContext.Provider>
            </>
        );
    }
}

应用程序.js：

import React from 'react';

import DataProvider from "./DataProvider";
import Contact from './components/contact/contact.component';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <div className="container">
          <DataProvider>
            <Contact contactIndex={0}/>
          </DataProvider>
        </div>
      </div>
    );
  }
}

消费者 Contact.js：

import React, { Component } from "react";
import AppContext from '../context/AppContext'

export default class Contact extends Component {
    static contextType = AppContext;
    
    componentDidMount () {
        console.log('My context is: ' + this.context);
    }

    render() {
        return (
            <div className="card"></div>
        );
    }
}

控制台输出是： 我的上下文是：未定义

谢谢你的帮助

问候达基尔

标签： reactjsreact-context

reactjs - ReactJS：在基于类的消费者组件中访问 this.context 时出现问题

问题描述

解决方案

推荐阅读