时间戳

首页 > 解决方案 > 在加载新数据之前显示旧数据的模式

javascript - 在加载新数据之前显示旧数据的模式

问题描述

我有一个从 api 获取一些数据的模态，第一次一切正常，然后当我关闭模态并用不同的数据打开它时，它首先向我显示带有加载进度的旧数据，然后更新数据，我想只显示没有旧数据的进度条，然后当新数据准备好时我显示它？

  <CustomModal
      open={Boolean(openModalState)}
      onClose={onClose}
      title="Sorting Log"
      maxWidth="85%"
      renderActionButton={
        <ActionButton
          label="Reload"
          onClick={e => {
            e.stopPropagation()
            fetchData()
          }}
        />
      }
    >
      <div className={classes.logScreen}>
        <LogsViewBody
          loading={loading && !data}
          loadMore={loading && Boolean(data)}
          error={error}
        >
          <InfiniteLogs data={data} loadMore={loadMore} hasMore={hasMore} />
        </LogsViewBody>
      </div>
    </CustomModal>

标签： javascriptreactjsreact-reduxfetch

解决方案

删除数据/将它们设置为“”等 onClose 怎么样？

或者我做了很多次 - 使用三元 ->loading ? showLoading : showData

.. 在 JSX 中它可以写成：

loading ? <my-loading-component /> : <my-content-component />

推荐阅读