Когда я удаляю сотрудника в приложении, он говорит: «Идентификатор не определен». Мой интерфейс - React и Redux. Бэкэнд это Node, Express и Mon go DB

Question

У меня проблема, когда я пытаюсь удалить сотрудника, он говорит, что ID не определен. Фронтенд был построен с реактивной избыточностью. Бэкэнд был построен с Node, Express и Mon go DB. Буду признателен, если вы поможете мне решить проблему, пожалуйста

//ACTION CREATORS..

import axios from "axios";

import {
  GET_EMPLOYEES,
  ADD_EMPLOYEE,
  UPDATE_EMPLOYEE,
  DELETE_EMPLOYEE
} from "./types";

export const getEmployees = () => async dispatch => {
  await axios.get("/api/items").then(res =>
    dispatch({
      type: "GET_EMPLOYEES",
      payload: res.data
    })
  );
};

export const deleteEmployee = id => async dispatch => {
  await axios.delete(`/api/items/${id}`).then(res =>
    dispatch({
      type: "DELETE_EMPLOYEE",
      payload: id
    })
  );
};


//REDUCERS...
import {
  GET_EMPLOYEES,
  ADD_EMPLOYEE,
  UPDATE_EMPLOYEE,
  DELETE_EMPLOYEE
} from "../actions/types";

const initialState = {
  employees: []
};

const employeeReducer = (state = initialState, action) => {
  switch (action.type) {
    case "GET_EMPLOYEES":
      return {
        ...state,
        employees: action.payload
      };
    case "DELETE_EMPLOYEE":
      return {
        ...state,
        employees: state.employees.filter(emp => emp._id !== action.payload)
      };
    default:
      return state;
  }
};

export default employeeReducer;

//MY COMPONENT 
import React, { Component } from "react";
import {
  Container,
  Table,
  Button,
  Card,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle
} from "reactstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { getEmployees, deleteEmployee } from "../actions";
import uniqid from "uniqid";

import { connect } from "react-redux";

class EmployeeList extends Component {
  componentDidMount() {
    this.props.getEmployees();
  }
  renderList() {
    return this.props.employee.employees.map(emp => {
      return (
        <div key={emp._id}>
          <Card style={{ marginBottom: "0.5rem" }}>
            <CardBody>
              <CardTitle>Employee Name : {emp.employee}</CardTitle>
              <CardSubtitle style={{ marginBottom: ".5rem" }}>
                Position : {emp.position}
              </CardSubtitle>
              <CardSubtitle style={{ marginBottom: ".5rem" }}>
                Salary : {emp.salary}
              </CardSubtitle>
              <Button
                color="danger"
                onClick={this.onDeleteClick.bind(this, id)}
              >
                Delete
              </Button>
            </CardBody>
          </Card>
        </div>
      );
    });
  }

  onDeleteClick(id) {
    this.props.deleteEmployee(id);
  }

  render() {
    console.log(this.props);

    return (
      <Container>
        <Button color="dark" style={{ marginBottom: "2rem" }}>
          Add Employee
        </Button>
        <div>{this.renderList()}</div>
      </Container>
    );
  }
}
const mapStateToProps = state => {
  return { employee: state.employees };
};
export default connect(mapStateToProps, { getEmployees, deleteEmployee })(
  EmployeeList
);

Answer 1

<Button
   color="danger"
   onClick={this.onDeleteClick.bind(this, id)}
>

Я полагаю, что в текущей области видимости нет идентификатора, попробуйте использовать "emp._id"