#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
разрешения обещания.