Серверная часть вылетает без ошибок при удалении из Mongo

#node.js #reactjs #mongodb #express #react-hooks

#node.js #reactjs #mongodb #экспресс #реагирующие крючки

Вопрос:

Первый вопрос: не знаете, что искать, чтобы найти решение, так что поехали.

Я использую React, Mongo, Express, Node.

PatientDetails.js

Вот как я извлекаю конкретного пациента при открытии карточки сведений.

 useEffect(() => {
    fetch(`/api/patients/${match.params.id}`)
    .then(response => response.json())
    .then(json => setPatient(json))

}, [patient])
  

Вот как я удаляю комментарий в карточке сведений о пациенте с помощью метода onclick.

 const deleteNote = (noteID) => {
    fetch(`/api/patients/${patient._id}/notes/${noteID}`, {
      method: 'DELETE',
    })
    .then(response => response.json())
};
  

Это мой маршрут API.

 // @route DELETE api/patients/:id/notes/:noteId
// @desc Delete a note

router.delete('/:id/notes/:noteId', async (req, res) => {
    const {id, noteId} = req.params
    await Patient.findByIdAndUpdate(id, {$pull: {notes: noteId}});
    await Note.findByIdAndRemove(noteId);
})
  

Я могу удалить примерно 3-4 комментария, прежде чем страница просто завершит загрузку навсегда, я не получаю никаких ошибок во внешнем интерфейсе или серверной части, и мне нужно перезапустить свой серверный сервер, затем я могу удалить еще 3-4 комментария, прежде чем это произойдет снова.

Что я делаю не так?

Комментарии:

1. Я чувствую, что выборка сведений о пациенте будет одноразовым событием при монтировании компонента. Таким образом, вам не понадобятся patient зависимости as для useEffect

2. Получаете ли вы тайм-аут от серверной части, после которого вам нужно перезапустить сервер?

3. DevTools не удалось загрузить исходную карту: не удалось загрузить содержимое для localhost: 3000 / static/js/bundle.js.map : загрузка отменена из-за тайм-аута загрузки То же самое происходит после того, как я попытался удалить [пациентов] как зависимость, но в целом я вообще не получаю ошибок, серверная часть просто останавливаетсяотправка данных, или интерфейс перестает получать, одно из двух.

Ответ №1:

У вас есть некоторые проблемы как во внешнем, так и во внутреннем интерфейсе:

В компоненте React вы должны добавить match.params.id в качестве зависимости от перехвата:

 useEffect(() => {
    fetch(`/api/patients/${match.params.id}`)
    .then(response => response.json())
    .then(json => setPatient(json))

}, [match.params.id])
  

В промежуточном ПО Express вы должны отправить ответ после изменения базы данных:

 router.delete('/:id/notes/:noteId', async (req, res) => {
    const {id, noteId} = req.params
    await Patient.findByIdAndUpdate(id, {$pull: {notes: noteId}});
    await Note.findByIdAndRemove(noteId);
    res.status(200).send({});
})
  

Комментарии:

1. Эй, похоже, это устранило мою проблему. Проблема заключалась в том, что после изменения базы данных статус 200 не отправлялся, match.params.id был неуместен, и он не обновил мой компонент при удалении. Он отлично работает с решением промежуточного программного обеспечения express. Большое вам спасибо!

2. Пожалуйста! 🙂 Обратите внимание, что использование match.params.id в ловушке это не связано с обновлением компонента после удаления. При изменении URL-адреса перехват выполняется снова. Если вы хотите что-то сделать после завершения запроса на удаление, вы должны добавить эту логику после deleteNote разрешения обещания.