有问题显示来自状态的对象

Question

我在从我的状态获取数据时遇到了问题，我需要从employee状态中获得信息，以便在回购中显示引用I Employee.js和EmployeeItem.js的页面。我可以根据状态中有多少个条目来映射状态并显示一些空白对象，但是我在显示单个对象和信息时遇到了困难。

页面当前呈现的方式

​

我如何需要页面来呈现

​

Employee.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。您正在为profile分配员工值。

<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 }) => {
}