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

Question

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

AppContext.js:

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

DataProvider.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>
            </>
        );
    }
}

App.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>
        );
    }
}

控制台输出为： 我的上下文是：undefined

感谢您的帮助

问候达基尔

Answer 1

你的代码对我来说似乎是正确的，我试图在沙盒中复制它以找出错误并且以某种方式工作得很好。

https://codesandbox.io/s/interesting-https-emgoz?file=/src/App.js

试图找出不同之处，但老实说我做不到。

Answer 2

我在其他答案的 CodeSandbox 中看到的唯一区别是导入路径不同。

import AppContext from "./AppContext";

对比： import AppContext from '../context/AppContext'

也许 OP 有 filepath/import 错误？

p.s。如果这是错误，TypeScript 是避免 JS 中此类事情的救星。

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

ReactJS: Problem accessing this.context in a class based consumer component

reactjs

react-context