数组未在地图内呈现

Question

我正在使用包含员工详细信息的上下文 API 传递一个数组。当我在 Employee.js 组件中使用数组并尝试使用 map 方法呈现每个员工时，但数组的这些值仅显示在控制台中并且它不使用 JSX 呈现。

data.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,
        
    }
];

context.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};

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=>(
                              <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;

Answer 1

你忘记了return:

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;

Answer 2

您的示例中有几个“有趣”的地方。

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

你确定状态克隆吗？在每个渲染器上重新计算值。请查看官方文档https://en.reactjs.org/docs/context.html#caveats

最好直接通过this.state

class Employee extends Component { render() {

它看起来像功能组件。

最后。确切问题：

<EmployeeConsumer>{value => { ... }}</EmployeeConsumer>

在您的原始示例中，大括号代表代码块，returns undefined 忽略 .map 表达式

使用 () 来显式声明表达式：

<EmployeeConsumer>{value => (...)}</EmployeeConsumer>

数组未在地图内呈现

Array is not rendering inside the map

javascript

reactjs

react-context

data.js

context.js

Employee.js