не работает обработчик удаления

Question

Создаю для себя маленькое приложение, так вот мне нужно добавить функцию удаления блюда. и при подтверждении я хотел использовать не по умолчанию от системы, а чтобы было модальное окно. так вот написал код с помощью ChatGPT и удаление не работает, прошу помочь найти ошибку и исправить.

Api.js

export const deleteDish = (id) => API.delete(`/dishes/${id}`);

Dishes.js

router.delete('/dishes/:id', async (req, res) => {
  try {
    const dish = await Dish.findByIdAndDelete(req.params.id);
    if (!dish) return res.status(404).send('Dish not found');
    res.status(200).send('Deleted');
  } catch (err) {
    console.error(err);  // ← важно: покажет реальную ошибку
    res.status(500).send('Server error');
  }
});

сам код

    const openDeleteConfirm = (dish) => {
  console.log(dish)
    setDishToDelete(dish);
    setConfirmDeleteOpen(true);
  };

const confirmDeleteDish = async (dish) => {
  if (!dish) return;
  try {
    await deleteDish(dish.id);
    toast.success(`Dish "${dish.name}" deleted`);
    fetchData(); // обновить список блюд
  } catch {
    toast.error('Error deleting dish');
  }
};

диалоговое окно для подтверждения удаления

<Dialog open={confirmDeleteOpen} onClose={() => setConfirmDeleteOpen(false)}>
        <DialogTitle>Confirm Deletion</DialogTitle>
        <DialogContent>
          <Typography>
            Are you sure you want to delete "{dishToDelete?.name}"?
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDeleteOpen(false)}>Cancel</Button>
          <Button onClick={confirmDeleteDish} color="error" variant="contained">Delete</Button>
        </DialogActions>
      </Dialog>

и сама кнопка в карточке для вызова этого окна

<Button size="small" color="error" onClick={() => openDeleteConfirm(dish._id)}>Delete</Button>

при попытке удались с insomnia все работает, блюдо удаляется. а вот с сайта пытаюсь выдает

api/dishes/undefined 500 (Internal Server Error)

Answer 1

Ваша функция confirmDeleteDish ожидает параметром передачи dish const confirmDeleteDish = async (dish) => {...}. А кнопка в диалоге вызывает функцию без параметров <Button onClick={confirmDeleteDish} ...>.

Если функция confirmDeleteDish объявлена в том же компоненте, где и стейт dish, то вы можете убрать из параметров dish: const confirmDeleteDish = async () => {...}.

И в этом случае все должно заработать.

Если же модальное окно получает только dishToDelete, то вам стоит заменить callback в onClick кнопки на: <Button onClick={() => confirmDeleteDish(dishToDelete)} ...>

БЛОГ НА HUSL

не работает обработчик удаления

Ответы (1 шт):