Реагировать на проблему с редуксом с обещанием, потому что моя переменная равна нулю

У меня есть приложение React-Redux, и у меня проблема с обещанием. Для начала я хотел бы дать вам мой код:

проблема в том, что мой dateApi просто «удивляет» во второй раз. Мне нужно дать обещание, но я не знаю, как это сделать.

ПРОБЛЕМА: это мой метод в интерфейсе реагирования:

...
    this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo);
    // ^^ this returns dataApi ^^

    var i = 1;
    var j = 1;
    var k = 1;
    var l = 0;
    var dateArray = [];
    this.props.dataApi.map(dA => {
    ... // this.props.dataApi is null

Редуктор:

case GET_DATA_LAST_WEEK:
  return state.set("dataApi", []).set("isLoading", true);

case GET_DATA_LAST_WEEK_SUCCESS:
  return state.set("isLoading", false).set("dataApi", action.response);

Это мои действия: (ответ мой dataApi)

export function getDataLastWeekAction(from, to) {
  return {
    type: GET_DATA_LAST_WEEK,
    from,
    to
  };
}

export function successDataLastWeekAction(response) {
  return {
    type: GET_DATA_LAST_WEEK_SUCCESS,
    response
  };
}

И это моя функция redux-saga:

    export function* handleLastWeek() {
  const from = yield select(makeSelectDateFrom());
  const to = yield select(makeSelectDateTo());
  const requestURL = `/api/daydate`;

  try {
    const response = yield call(request, requestURL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${getToken()}`,
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        from,
        to
      })
    });

    if (response) {
      yield put(successDataLastWeekAction(response));
    } else {
      yield put(errorDataLastWeekAction("Spróbuj ponownie za moment."));
    }
  } catch (err) {
    yield put(errorDataLastWeekAction(err));
  }
}

где this.props.dataApi.map(dA => { ... // this.props.dataApi is null называется? из рендера()?

Tyro Hunter 14.03.2019 15:09

@TyroHunter, в componentDidMount(), но не только. Я использую это в функции onClick и т.д.

promiseREact2 14.03.2019 15:11

можете ли вы зарегистрировать ответ, как показано ниже, просто чтобы убедиться, что ваш API действительно отвечает ожидаемым данным: console.info(response); if (response) { yield put(successDataLastWeekAction(response)); } else { yield put(errorDataLastWeekAction("Spróbuj ponownie za moment.")); } Если вы видите зарегистрированные данные, проблема может быть связана не с обещанием, а с вашими избыточными соединениями.

Tyro Hunter 14.03.2019 15:11

@Тиро, да. API всегда возвращает истинные данные, и эта проблема обещает 100%

promiseREact2 14.03.2019 15:13

хорошо, тогда попробуйте console.info(this.props.dataApi) на этот раз метод рендеринга, он должен быть вызван как минимум дважды, и сравните два журнала, видите ли вы ожидаемые данные из второго журнала (2-й вызов рендера)?

Tyro Hunter 14.03.2019 15:15

@TyroHunter, да. первый console.info - пустой массив, а консоль секунд - мой истинный массив с данными

promiseREact2 14.03.2019 15:17

Надеюсь, теперь у вас есть подсказка? просто для дальнейшего объяснения: рендеринг был вызван снова после отправки из редукса. Обратитесь к if (response) { yield put(successDataLastWeekAction(response)); } Это нормальное поведение контейнеров или компонентов, подключенных к состоянию избыточности. Он может прослушивать или обновлять себя при изменении состояния, таким образом, повторно отображая. Итак, на вашем месте вы бы создали «метод рендеринга», возможно, renderData() { return ....map(data => <div>{data.field1}</div> }, так что теперь ваш метод рендеринга будет выглядеть так: это: render() { return <div>{this.renderData()}<div> }

Tyro Hunter 14.03.2019 15:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
7
33
0

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