Функция setTimeout в saga React.js

#javascript #reactjs #react-redux #redux-saga #saga

#javascript #reactjs #реагирование-уменьшение #redux-сага #сага

Вопрос:

Я просто хочу скрыть кнопку отмены в пользовательском интерфейсе через 5 секунд. Вот мой код:

Saga.js

 function* updateActionListingsSaga({ payload }) {
  try {
    const res = yield call(updateUnpublishedListingsById, payload);
    let unpublishedListings = yield select(UnpublishedListings);
    if (res) {
      const row = unpublishedListings.listingsData.results.find(data => data.id === res.ids[0])
      if (row) {
        row.review_status = payload.review_status
        row.isUndoEnabled = true;
        yield setTimeout(() => {row.isUndoEnabled = false}, 5000)
      }
    }
    
    yield put(updateActionListingSuccess());
  } catch (error) {
    yield put(apiError(error.error || error.message || error));
  }
}

Index.js

 item?.isUndoEnabled amp;amp; (
  <ConfirmDialogBtn
    button={{
      color: 'primary',
      title: 'Undo',
      icon: 'bx bx-undo',
    }}
    msg="Set this Listing as Undo"
    onConfirm={() => handleUpdateListing(item?.id, 'pending')}
  />
)

Я извлекаю определенную строку, устанавливаю кнопку отмены, добавляя row.isUndoEnabled= true свойство, и после 5 секунд задержки я просто устанавливаю его row.isUndoEnabled= false .

Фактический вывод: свойство имеет значение True, но не скрывает кнопку

Ожидаемый результат: скрыть кнопку

Надеюсь на лучший ответ. Спасибо

1. «Фактический вывод: свойство имеет значение True, но не скрывает кнопку» итак, где вы прячете кнопку?

2. @DennisVash Внутри пользовательского интерфейса я ставлю условие, когда значение isUndoEnabled равно true, тогда оно будет отображаться, в противном случае оно будет скрыто

3. Проблема в том, что yield put(updateActionListingSuccess()); выполняется до истечения времени ожидания функции обратного вызова. Я рекомендую вам поместить некоторое действие в тайм-аут, и это действие обновит строку.Значение isUndoEnabled

4. @lissettdm Совершенно верно, вы правы. Какой тип действия я должен выполнить?

5. Ну, вам нужно создать новое действие для этого случая или попытаться снова вызвать updateActionListingSuccess()

Ответ №1:

Кнопка не скрывается, потому updateActionListingSuccess что функция вызывается до выполнения обратного вызова по таймауту. Я рекомендую вам:

Оберните timeout функцию внутри a Promise и подождите, пока она не завершится.
Вызовите updateActionListingSuccess сразу после разрешения обещания.

     function* updateActionListingsSaga({ payload }) {
      try {
        const res = yield call(updateUnpublishedListingsById, payload);
        let unpublishedListings = yield select(UnpublishedListings);
        let row = null;
        if (res) {
          row = unpublishedListings.listingsData.results.find(
            data => data.id === res.ids[0]
          );
          if (row) {
            row.review_status = payload.review_status;
            row.isUndoEnabled = true;
          }
        }
        yield put(updateActionListingSuccess());
        if (row) {
          yield new Promise(resolve =>
            setTimeout(() => {
              row.isUndoEnabled = false;
              resolve();
            }, 5000)
          );
        }
        yield put(updateActionListingSuccess()); // update again
      } catch (error) {
        yield put(apiError(error.error || error.message || error));
      }
    }