Использование Fetch in React для получения данных с сервера
Я пытаюсь получить данные с сервера (Node.js) с помощью следующего кода:
componentDidMount = () => {
fetch('http://localhost:3000/numberofjobs')
.then(response => response.json())
.then(numberOfJobs => {
console.info(numberOfJobs)
})
}
Это мой маршрут в Node:
const handleNumberOfJobs = (req, res, Register) => {
Register.find({})
.then(users => {
const total = users.reduce((sum, { numberOfJobs }) => sum +
numberOfJobs, 0);
console.info(total);
})
.then(response => res.json(response))
}
Одна из моих проблем - Front-end console.info не отображается в консоли, и я не знаю почему. На стороне сервера, когда страницы загружаются, он делает console.info суммой и всем остальным, поэтому он работает, поэтому я считаю, что я делаю что-то не так с React. Я хочу вывести эту информацию на свой интерфейс, чтобы я мог отобразить ее на странице.
Большое спасибо!!
Помимо проверки ошибок на fetch, которая вряд ли является проблемой, это выглядит нормально, за исключением того, что сделать componentDidMount такой стрелочной функцией немного необычно. Обновите свой вопрос, добавив минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный, используя Stack Snippets (кнопка панели инструментов [<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать. (Вы можете использовать setTimeout для имитации fetch.)
Попробуйте добавить .catch(error => console.info(error)). Вероятно, это как-то вызывает ошибку и не достигает console.info на вашем .then.
@JamesIves - Однако обычно вы получаете сообщение об ошибке "необработанный отказ" в консоли ...
Вы уверены, что .then(response => res.json(response)) вернет ответ. Я думаю, что возврат ответа (res.json(response)) в первом then, где у вас есть console.info, будет работать.
Ребята, большое спасибо за вашу помощь, на самом деле я нашел проблему, вместо того, чтобы вернуть общую сумму, я ее console.infoging! После того, как я его изменил, он начал реагировать. Спасибо еще раз!!
@ Дхирендра, я тоже попробую! Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
TL; DR
Ошибка в том, как вы используете неявный возврат стрелочных функций в коде сторона сервера.
Чтобы исправить это, просто добавьте return total; в первый обработчик .then(...).
Подробности
Во-первых, давайте разберемся: я согласен с комментариями о том, что не следует пренебрегать проверками ошибок! (Будь то fetch или что-нибудь еще.)
В любом случае: вы используете стрелочные функции в ваших обработчиках .then(...). Но последнее утверждение в первом - это console.info(total). Возвращаемое значение этого вызова - undefined, которое становится неявным возвращаемым значением вашей стрелочной функции. Затем промис передает это как значение response во второй обработчик .then(...). (Вы можете убедиться в этом, добавив console.info(response) во второй обработчик .then(...).
Чтобы исправить это, просто добавьте return total; в первый обработчик .then(...):
const handleNumberOfJobs = (req, res, Register) => {
Register
.find({})
.then(users => {
const total = users.reduce(
(sum, { numberOfJobs }) => sum +
numberOfJobs, 0
);
console.info(total); // <-- returns undefined
return total; // <-- pass on to next promise
})
.then(response => {
// console.info(response); // if you're curious
res.json(response)
})
}
}
Персональный совет: сделайте отступ в коде для облегчения обслуживания.
Боковое примечание: вы не проверяете ошибки в этом вызове
fetch. Это настолько распространенная ошибка, что Я написал это в своем маленьком анемичном блоге.