Question

这是发生情况的过程：第一次访问我的屏幕时，出现LoadingSpinner，指示正在提取请求的调度数据。我从所有数据加载一次后出现的DataGrid中选择行项目。选中“删除”后，将显示DeleteModal以进行确认，并且所选行项目将从dataGrid中删除。当前，在关闭Delete Modal之后，该消息显示在DataGrid再次出现之前。

这是我想在DeleteModal不再可见时发生的事情：我希望初始的LoadingSpinner再次显示，直到剩余的DataGrid行完成派生操作以提取数据。

我应该在DeleteModalContainer或设置onDelete函数的Actions.js中访问“加载微调器”吗？

在deleteModal中，我尝试在返回之后添加一个“ isLoading” ... return isLoading ? (，然后将isLoading添加到deleteModalContainer。

Members.js
{isLoading ? (
          <LoadingSpinner className="manage-view__tab-view-loader" />
        ) : !members || members.length < 1 ? (
          <NoResults>
            You don&apos;t have any members.<br /> Please use import or manually
            add members(s).
          </NoResults>
        ) : (
          <MembersGrid members={members} />
        )}

MembersContainer.js -
const mapStateToProps = (state, ownProps) => ({
  members: getMembersList(state),
  isLoading: getMembersIsLoading(state, ownProps)
});

DeleteModal.js -
<Button onClick={() => onDelete(users)}>Delete</Button>

DeleteModalContainer.js - 
const mapStateToProps = state => ({
  isOpen: getDeleteMemberModalOpen(state)
});

const mapDispatchToProps = (dispatch, { match: { params } }) => ({
  onCancel: () => dispatch(setDeleteMemberModalOpen(false)),
  onDelete: users => {
    // Post the member deletion
    dispatch(deleteMembers(params.boardId, users));
  }
});

Actions.js - 
REQUEST,
          {
            type: SUCCESS,
            payload: (action, state, res) => {
              dispatch(setDeleteMemberModalOpen(false));
              dispatch(fetchMembers(boardId));
              return Object.values(res);
            }
          }

预期结果是： 1.用户选择“删除” 2.删除模式关闭 3.在显示剩余成员之前，“成员网格”会显示加载微调框。

模态关闭后如何设置“加载微调器”？

0 个答案: