javascript - saga React.js 中的 setTimeout 函数

Question

我只想在 5 秒后隐藏 UI 中的撤消按钮。这是我的代码:
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));
  }
}

索引.js

item?.isUndoEnabled && (
  <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 但不隐藏按钮
预期输出:隐藏按钮
希望得到最好的答案。
谢谢

Answer 1

该按钮没有隐藏，因为 updateActionListingSuccess在执行超时回调之前调用函数。我推荐你:

包裹 timeout Promise 中的函数并等到它完成。

调用 updateActionListingSuccess就在 promise 解决之后。

    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));
      }
    }