Все работает, и он удалит заявку, когда вы нажмете кнопку удаления, но в // Удалить заявку в действиях с заявкой будет сказано, что отправка не является функцией. Я пытаюсь удалить указанный билет c, по которому щелкают, а также добавить кнопку редактирования билета.
Билеты. js более высокий уровень
import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import TicketItem from './TicketItem';
import { getCurrentUsersTickets, deleteTickets } from '../../actions/tickets';
const Tickets = ({ getCurrentUsersTickets, tickets: { tickets, loading } }) => {
useEffect(() => {
getCurrentUsersTickets();
}, []);
return (
<Fragment>
{loading ? (
<Spinner />
) : (
<Fragment>
<h1 className='large text-primary'>Your Active Tickets</h1>
<div className='container'>
{tickets.length > 0 ? (
tickets.map(tickets => (
<TicketItem
key={tickets._id}
tickets={tickets}
deleteTickets={deleteTickets}
/>
))
) : (
<h4>No tickets found...</h4>
)}
</div>
</Fragment>
)}
</Fragment>
);
};
Tickets.propTypes = {
getCurrentUsersTickets: PropTypes.func.isRequired,
tickets: PropTypes.object.isRequired,
deleteTickets: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
tickets: state.tickets
});
export default connect(mapStateToProps, {
getCurrentUsersTickets,
deleteTickets
})(Tickets);
Ticketitems . js дочерний компонент
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
const TicketItem = ({
tickets: {
_id,
title,
fromBuilding,
fromRoom,
toBuilding,
toRoom,
contactNumber,
description,
reasonForMove
},
deleteTickets
}) => {
return (
<div className='accordion' id={`userTickets${_id}`}>
<div className='card'>
<div className='card-header' id={`userTicketsHeading${_id}`}>
<h2 className='mb-0'>
<button
className='btn btn-link'
type='button'
data-toggle='collapse'
data-target={`#collapse${_id}`}
aria-expanded='true'
aria-controls={`collapse${_id}`}
>
{title}
</button>
</h2>
</div>
<div
id={`collapse${_id}`}
className='collapse'
aria-labelledby={`userTicketsHeading${_id}`}
data-parent={`#userTickets${_id}`}
>
<div className='card-body'>
<ul>
<li>
<span className='font-weight-bolder'>From Building:</span>{' '}
{fromBuilding}
</li>
<li>
<span className='font-weight-bolder'>From Room:</span>{' '}
{fromRoom}
</li>
<li>
<span className='font-weight-bolder'>To Building:</span>{' '}
{toBuilding}
</li>
<li>
<span className='font-weight-bolder'>To Building:</span>{' '}
{toRoom}
</li>
<li>
<span className='font-weight-bolder'>Contact Number:</span>{' '}
{contactNumber}
</li>
<li>
<span className='font-weight-bolder'>Description:</span>{' '}
{description}
</li>
<li>
<span className='font-weight-bolder'>Reason For Move:</span>{' '}
{reasonForMove}
</li>
</ul>
<button className='btn btn-danger' onClick={deleteTickets(_id)}>
Delete Ticket
</button>
</div>
</div>
</div>
</div>
);
};
TicketItem.propTypes = {
tickets: PropTypes.object.isRequired,
deleteTickets: PropTypes.func.isRequired
};
export default TicketItem;
действия с билетами
import axios from 'axios';
import { setAlert } from './alert';
import { GET_USERS_TICKETS, TICKETS_ERROR, DELETE_TICKETS } from './types';
// Get tickets
export const getCurrentUsersTickets = () => async dispatch => {
try {
const res = await axios.get('/api/tickets/me');
dispatch({
type: GET_USERS_TICKETS,
payload: res.data
});
} catch (err) {
dispatch({
type: TICKETS_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};
// Create
export const createTickets = (formData, history) => async dispatch => {
try {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const res = await axios.post('/api/tickets', formData, config);
dispatch({
type: GET_USERS_TICKETS,
payload: res.data
});
history.push('/dashboard');
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
}
dispatch({
type: TICKETS_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};
// Delete ticket
export const deleteTickets = id => async dispatch => {
try {
await axios.delete(`/api/tickets/delete/${id}`);
dispatch({
type: DELETE_TICKETS,
payload: id
});
} catch (err) {
console.log('err response', err);
// dispatch({
// type: TICKETS_ERROR,
// payload: { msg: err.response.statusText, status: err.response.status }
// });
}
};
редукторы билетов
import {
GET_USERS_TICKETS,
TICKETS_ERROR,
CLEAR_TICKETS,
DELETE_TICKETS
} from '../actions/types';
const initialState = {
tickets: [],
loading: true,
error: {}
};
export default function(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case GET_USERS_TICKETS:
return {
...state,
tickets: payload,
loading: false
};
case TICKETS_ERROR:
return {
...state,
error: payload,
loading: false
};
case CLEAR_TICKETS:
return {
...state,
tickets: [],
loading: false
};
case DELETE_TICKETS:
return {
...state,
tickets: state.tickets.filter(
tickets => tickets._id !== action.payload
),
loading: false
};
default:
return state;
}
}