Использование Fetch в React для получения данных с сервера

Question

Я пытаюсь получить данные с сервера (Node.js) с помощью следующего кода:

componentDidMount = () => {
fetch('http://localhost:3000/numberofjobs')
.then(response => response.json())
.then(numberOfJobs => {
      console.log(numberOfJobs)
})
}

Это мой маршрут в узле:

const handleNumberOfJobs = (req, res, Register) => {
 Register.find({})
  .then(users =>  {
  const total = users.reduce((sum, { numberOfJobs }) => sum + 
  numberOfJobs, 0);
  console.log(total);
  })
  .then(response => res.json(response))
}

Одна проблема, которую я 'У меня есть Front-end console.log не отображается в консоли, и я не знаю почему.На стороне сервера, когда страницы загружаются, он делает console.log сумму и все, так что это работает, поэтому я считаю, что я делаю что-то не так с React.Я хочу донести эту информацию до моего интерфейса, чтобы я мог отобразить ее на странице.

Большое спасибо !!

Answer 1

TL; DR

Ошибка в том, что вы используете неявные возвраты функций стрелок в вашем серверном коде.

Исправление заключается в добавлении return total; в первый обработчик .then(...).

Детали

Прежде всего, давайте разберемся: я согласен с комментариями о том, что не следует пренебрегать проверками ошибок! (Будь то fetch или что-нибудь еще.)

В любом случае: Вы используете функции стрелок в ваших .then(...) обработчиках. Но последнее утверждение в первом - console.log(total). Возвращаемое значение этого вызова - undefined, которое становится неявным возвращаемым значением вашей функции стрелки. Затем обещание передает это значение response во второй обработчик .then(...). (Вы можете проверить это, добавив console.log(response) во второй обработчик .then(...).

Исправление: просто добавьте return total; в первый обработчик .then(...):

const handleNumberOfJobs = (req, res, Register) => {
  Register
    .find({})
    .then(users => {
      const total = users.reduce(
        (sum, { numberOfJobs }) => sum + 
            numberOfJobs, 0
      );
      console.log(total);   // <-- returns undefined
      return total;         // <-- pass on to next promise
    })
    .then(response => {
      // console.log(response);  // if you're curious
      res.json(response)
    })
  }
}

Персональная подсказка: вставьте код в код для облегчения обслуживания.