Почему он возвращает undefined из этой отправки?

Я получаю объект с именем project, который содержит один массив QS и два идентификатора, для каждого из которых я хочу отправить новое действие. первая отправка возвращает массив правильно

.then((project) => dispatch(lastProjectFetchDataSuccess(project.qs)))

но два других возвращают undefined? объект, который я получаю:

{qs:[objects],qpId: "an ID",projectId: "another ID"}

Действие:

export function lastProjectFetchData(url, owner) {
  return dispatch => {
    dispatch(lastProjectIsLoading(true));
    fetch(url, {
      method: "POST",
      body: JSON.stringify({
        owner: "charlie",
        projectName: "charliesprojekt"
      }),
      headers: { "Content-Type": "application/json" }
    })
      .then(response => {
        if (!response.ok) {
          throw Error(response.statusText);
        }

        dispatch(lastProjectIsLoading(false));

        return response;
      })
      .then(response => response.json())
      .then(project => dispatch(lastProjectFetchDataSuccess(project.qs))) // returns the array
      .then(project => dispatch(qpIdFetchDataSuccess(project.qpId))) // returns undefined
      .then(project => dispatch(projectIdFetchDataSuccess(project.projectId))) // returns undefined
      .catch(() => dispatch(lastProjectHasErrored(true)));
  };
}

обязательно возвращайте обещания. Либо так, либо используйте Promise.All [] для нескольких обещаний.

Joelgullander 10.07.2018 14:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
365
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не возвращаете project из вашего третьего обратного вызова then, поэтому следующие обратные вызовы then получат undefined.

Вместо этого вы можете сделать это:

.then(response => response.json())
.then(project => {
   dispatch(lastProjectFetchDataSuccess(project.qs));
   return project;
}) 
.then(project => {
   dispatch(qpIdFetchDataSuccess(project.qpId))
   return project;
 }) 
.then(project => {
  dispatch(projectIdFetchDataSuccess(project.projectId));
  return project;
})
.catch(() => dispatch(lastProjectHasErrored(true)));

Вы также можете сделать все это в том же обратном вызове then:

.then(response => response.json())
.then(project => {
   dispatch(lastProjectFetchDataSuccess(project.qs));
   dispatch(qpIdFetchDataSuccess(project.qpId));
   dispatch(projectIdFetchDataSuccess(project.projectId));
}) 
.catch(() => dispatch(lastProjectHasErrored(true)));

Вы возвращаете вызов dispatch вместо проекта в третьем then, поэтому следующие then получают результат dispatch(), который, вероятно, является undefined.

Другие вопросы по теме