上下文提供者在React.js中不起作用

Question

我是React js的初学者，我正在尝试在React js中实现Context Provider。但是，尽管我没有获得理想的输出。

我将联系人信息存储在context.js中，它将用作上下文提供者，在App.js中，我将其导入到App.js中，然后在Contacts.js中，我消耗了消费者并获得了价值，但仍然可以空白页，我不确定为什么不能在Context provider中绑定联系人组件

Context.js

import React, {Component} from 'react';

const Context = React.createContext();

export class Provider extends Component {
    state = {
        contacts: [{
            id: 1,
            name: "dasd B",
            email: "asdas@gmail.com",
            phone: "dsadas"
        }
    };

    render() {
        debugger
        return (
            <Context.Provider value={this.state}>
                {this.props.childern}
            </Context.Provider>
        );
    }
}

export const Consumer = Context.Consumer;

App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Contacts from './components/Contacts'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from './Context'

class App extends Component {
  render() {
    return (
      <Provider>
          <div className="App">
            <div className="container">
                <Contacts />
            </div>
        </div>
      </Provider>
    );
  }
}

export default App;

Contacts.js

import React, { Component } from 'react'
import Contact from './Contact';
import { Consumer } from '../Context';

class Contacts extends Component {

    deleteContact = id => {
        const { contacts } = this.state;
        const newContacts = contacts.filter(contact => contact.id!== id);
        this.setState({
            contacts: newContacts
        });
    };

    render() {
        debugger
        return(
            <Consumer>
                {value => {
                    const { contacts } = value;
                    return (
                    <React.Fragment > 
                         {contacts.map(contact => ( 
                                    <Contact 
                                        key = {contact.id}
                                        contact={contact} 
                                        deleteClickHandler = {this.deleteContact.bind(this, contact.id)}> 
                                    </Contact>
                                ))}
                    </React.Fragment>
                    );
                }}
            </Consumer>
        );
    }
}

export default Contacts;

Contact.js

  import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  
  
class Contact extends Component {

    state = {
        showContactinfo : false
    };

    onDeleteClick = () => {
      this.props.deleteClickHandler();
    }

    onEditClick() {

    }
    render() {
        const { name, email, phone } =this.props.contact;
        const { showContactinfo } = this.state;
      return (
        <div className="card card-body mb-3">
          <h4>{name}
            {showContactinfo ? (
            <div className="float-right">
              <i
               onClick= {this.onEditClick}
               style={{cursor: 'pointer', fontSize: 'medium'}} 
               className="fas fa-edit mr-3"></i>
              <i
              onClick= {this.onDeleteClick}
              style={{cursor: 'pointer', fontSize: 'medium'}} 
              className="fa fa-trash-alt"></i>
            </div>): 
            <i className="fa fa-sort-down float-right" 
            style={{cursor: 'pointer'}} 
            onClick={() => 
              this.setState({ showContactinfo: !this.state.showContactinfo})}></i>}
            
          </h4>
          {showContactinfo ? (
          <ul className="list-group">
              <li className="list-group-item">Email: {email}</li>
              <li className="list-group-item">Phone: {phone}</li>
          </ul>) : null}
        </div>
      )
    }
  }
  
  Contact.propTypes = { 
      contact: PropTypes.object.isRequired,
      deleteClickHandler: PropTypes.func.isRequired
  }

  export default Contact;