возникли проблемы с отображением объектов из состояния

Question

У меня возникла проблема с получением данных из моего штата. Мне нужна информация из штата сотрудников для отображения страниц со ссылкой на Employee. js и EmployeeItem. js в моем репо. Я могу отображать состояние и отображать количество пустых объектов в зависимости от количества записей в состоянии, но у меня возникают проблемы с отображением и информацией для отдельных объектов

Как страница отображается в данный момент

Как мне нужно, чтобы страница отображалась

Сотрудник. js

import React, {Fragment, useEffect} from 'react'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import Spinner from '../../layout/Spinner'
import {getEmployees} from '../../../actions/employee'
import EmployeeItem from './EmployeeItem'
import PropTypes from 'prop-types'

const Employees = ({ getEmployees, employee: {employees, loading}}) => {
    useEffect(() => {
        getEmployees()
    }, [])

    return (
        <Fragment>
            {loading ? <Spinner/> :
                <Fragment>
                    <section className="content bg-light">
                            <h1 className="x-large text-primary title">Employees</h1>
                            <div className="add">
                                <Link to="/employees/new"><i className="fas fa-plus-circle text-primary x-large"></i></Link>
                            </div>
                                {employees.length > 0 ? (
                                    employees.map(employee => (
                                        <EmployeeItem key={employee._id} profile={employee} />
                                    ))
                                ) : <h4>No Employees Found....</h4>}
                    </section>
                </Fragment>
            }
        </Fragment>
    )
}

Employees.propTypes = {
    getEmployees: PropTypes.func.isRequired,
    employee: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
    employee: state.employee
})

export default connect(mapStateToProps, {getEmployees})(Employees)

EmployeeItem. js

import React from 'react'
import {Link} from 'react-router-dom'
import PropTypes from 'prop-types'

const EmployeeItem = ({employee: name, employement, _id}) => {
    return (
        <div className="employee-container">
            <Link to={`/employees/${_id}`}>
                <div className="employee-icon bg-white">
                    <div className="circle-sal">
                        <h4 className="large initials">J D</h4>
                    </div>
                    <p className="lead-2">{name}</p>
                </div>
            </Link>
        </div>
    )
}

EmployeeItem.propTypes = {
    employee: PropTypes.object.isRequired,
}

export default EmployeeItem

[Что находится в состоянии:

Любая помощь по устранению этого будет принята с благодарностью.

Answer 1

Если вы посмотрите на EmployeeItem. Вы присваиваете значение сотрудника профилю проп.

<EmployeeItem key={employee._id} profile={employee} />

и пытаетесь получить доступ к значению неправильно.

const EmployeeItem = ({employee: name, employement, _id}) => {
}

Вы могли бы сделать это любым способом

<EmployeeItem key={employee._id} profile={employee} />

и в EmployeeItem

const EmployeeItem = ({ profile: { name, _id } }) => {
}

или

<EmployeeItem key={employee._id} {...employee} />

и в EmployeeItem

const EmployeeItem = ({ name, _id }) => {
}