陣列未在 map 內呈現

Question

我正在使用包含員工詳細信息的上下文 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;

Answer 1

你忘了回報：

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

您的示例中有幾個“有趣”的地方。

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

您確定 state 克隆嗎？ 在每次渲染時重新計算值。 請查看官方文檔https://en.reactjs.org/docs/context.html#caveats

最好按原樣通過this.state 。

2. class Employee extends Component { render() {

它看起來像功能組件。

3. 最后。 確切的問題：

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

在您的原始示例中，花括號代表代碼塊並返回undefined的忽略.map表達式

使用()來顯式聲明一個表達式：

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