Массив не отображается внутри карты - PullRequest
Новая
       107

Массив не отображается внутри карты

0 голосов
/ 06 августа 2020

Я передаю массив с помощью Context API, который содержит сведения о сотрудниках. Когда я использую массив в компоненте Employee. js и пытаюсь отобразить каждого из сотрудников с помощью метода map, но эти значения массива отображаются только в консоли и не отображаются с помощью JSX.

данные. js

export const employees=[
    {
        id:1001,
        name: "Nafaz Benzema",
        salary: 67000,
      
    },
    {
        id:1002,
        name: "Doto Kama",
        salary: 23000,
      
    },
    {
        id:1003,
        name: "Chopa Malli",
        salary: 14000,
        
    }
];

контекст. js

import React, { Component } from 'react';
import {employees,detailProduct,storeProducts} from './data'

const EmployeeContext=React.createContext();

class EmployeeProvider extends Component {

    constructor(props)
    {
        super(props);
        this.state={
            employees:employees
        }
    }

    render() {
        return (
            <EmployeeContext.Provider value={{...this.state}}>
               {this.props.children}
            </EmployeeContext.Provider>
        );
    }
}

const EmployeeConsumer=EmployeeContext.Consumer;

export {EmployeeContext,EmployeeProvider,EmployeeConsumer};

Сотрудник. js

import React, {Component } from 'react';
import {EmployeeConsumer} from '../context'
import EmpDisplay from './EmpDisplay';

class Employee extends Component {

    render() {
  
        return (
            <div>
                <EmployeeConsumer>
                    {
                 
                      value=>{
                           value.employees.map(emp=>(
                              <div className="employees">
                        {console.log(emp)}// working
                      <h2>Id : {emp.id}</h2>    //not rendering
                      <h2>Name : {emp.name}</h2> //not rendering
                     <h2>Salary : {emp.salary}</h2> //not rendering
      
                         </div>
                           ));
                      }
                        
                    }
                </EmployeeConsumer>
            </div>
        );
    }
}

export default Employee;

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

В вашем примере есть несколько "интересных" мест.

  1. <EmployeeContext.Provider value={{...this.state}}>

Вы уверены в клоне состояния? значение пересчитывается при каждой визуализации. Пожалуйста, посмотрите официальную документацию https://en.reactjs.org/docs/context.html#caveats

Лучше передать this.state как есть.

class Employee extends Component { render() {

Похоже на функциональный компонент.

И наконец. Точная проблема: 
<EmployeeConsumer>{value => { ... }}</EmployeeConsumer>

В вашем исходном примере фигурные скобки обозначают блок кода и возвращают undefined игнорируя .map выражение

Используйте () вместо явно объявить выражение: 

<EmployeeConsumer>{value => (...)}</EmployeeConsumer>
0 голосов
/ 06 августа 2020

Вы забыли вернуть: 

Employee.js
import React, {Component } from 'react';
import {EmployeeConsumer} from '../context'
import EmpDisplay from './EmpDisplay';

class Employee extends Component {

    render() {
  
        return (
            <div>
                <EmployeeConsumer>
                    {
                 
                      value=>{
                           value.employees.map(emp=>{
                              return 
                              <div className="employees">
                        {console.log(emp)}// working
                      <h2>Id : {emp.id}</h2>    //not rendering
                      <h2>Name : {emp.name}</h2> //not rendering
                     <h2>Salary : {emp.salary}</h2> //not rendering
      
                         </div>
                           });
                      }
                        
                    }
                </EmployeeConsumer>
            </div>
        );
    }
}

export default Employee;
...