该组件不呈现任何东西，此外其父级不调用它

问题描述

我有两个包含状态（数据）的组件 Contact （子级）和 Contacts （父级）和上下文API ，Contacts是消费者，它呼叫“联系人”，但不执行任何操作（空白页）

context.js 集中数据（状态）

const Context = React.createContext();    
export class Provider extends Component {
        
    state = {
        contacts: [
            {  id: 1,name: 'Name 1',email: '[e-mail]',phone: '0650303311'},{  id: 2,name: 'Name 2',email: '[e-mail]',phone: '0650303312'},{  id: 3,name: 'Name 3',email: '[e-mail]',phone: '0650303313'},]}
    render() {
        return (
            <Context.Provider value={this.state}>
                    {this.props.children}
            </Context.Provider>
        )
    }
}
export const Consumer = Context.Consumer;

[Contacts.js] [3]消耗上下文api的父组件

import {Consumer} from '../context'    
export default class Contacts extends Component {    
    render() {            
        return (
            <Consumer>
                {value => {
                    <div>
                        {value.contacts.map( (contact) => (
                            <Contact key={contact.id} data={contact} />
                        //  console.log(contact)
                        ))}
                    </div>
                }}
            </Consumer>
        )
    }
}

[Contact.js] [4]由其父母调用的子组件

import React,{ Component } from 'react'    
class Contact extends Component {
    render() {
        const {name,phone,email}  = this.props.data;
        console.log(this.props.data)
        return (
            <div>
               <div>
                    <div>
                        <h4>{name}</h4>
                        <div>
                            <ul>
                                <li>{phone}</li>
                                <li>{email}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Contact

[App] [5]

import {Provider} from './components/context'    
function App() {
  return (    
     <Provider> 
        <div className="App">
          <Contacts/>
         </div>
    </Provider>
  );
}
export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）