使用弹出窗口拦截器启用，得到一个 React 错误太多重新渲染

问题描述

我有一个奇怪的问题..我正在打开一个从graphql查询返回的blob，它是一个pdf..如果我启用浏览器弹出窗口阻止程序，它会按预期工作，我会在url栏中收到一条消息，说一个弹出窗口被阻止了.. 如果我将其设置为允许弹出窗口，我会收到 50 多个 pdf 标签，并在控制台中显示“重新渲染过多”的错误消息。

如果我从

中删除“&& closeModal()”

{fileType.includes('pdf') && !isIE && window.open(documentSource) && closeModal()}

我只打开了一个 pdf，但调用页面变为空白，并在控制台中显示不同的错误消息：

未捕获的错误：对象作为 React 子对象无效（找到：[object 窗户]）。如果您打算渲染一组孩子，请使用 数组代替。

有人对我在打击代码中做错了什么有建议吗？

    const closeModal = () => {
    setLoadingMsg(true);
    setShowModal(false);
  };

  return (
    <Box>
      <Modal
        showModal={showModal}
        onEsc={closeModal}
        onClickOutside={closeModal}
      >
        <StyledModal>
          {documentData && (
            <StyledHeader>
              <StyledHeaderText>
                <Text size="14pt">
                  {documentData.file_name?.replace(/(-?[0-9]+([0-9]+ )?)/g,'')}
                </Text>
              </StyledHeaderText>
            </StyledHeader>
          )}

          {!documentError && (
            <StyledBox>
              {!isIE && (
                <img alt="Loading" src={Loading} width="auto" height="100px" />
              )}
              <Box>{showLoadingMsg ? 'Preparing your document...' : ''}</Box>
            </StyledBox>
          )}

          {fileType.includes('htm') && <Box />}

          {fileType.includes('pdf') && !isIE && window.open(documentSource,"_blank") && closeModal()}

          {fileType.includes('pdf') && isIE && (
            <Box>
              <a href={documentSource}>Download Ready</a>
              <StyledText>
                Please right-click the above link and select <strong>Save target as</strong> to
                download your document.
              </StyledText>
            </Box>
          )}

          {(fileType === 'error' || documentError) && (
            <StyledBox>
              <Text>There was an error fetching the requested document.</Text>
              <Text>Close the modal and try downloading again.</Text>
            </StyledBox>
          )}
          {(fileType === 'error' || documentError || isIE) && (
            <StyledFooter>
              <StyledCloseButton label="CLOSE" onClick={closeModal} />
            </StyledFooter>
          )}
        </StyledModal>
      </Modal>
      <DocumentsPage
        onDocumentClick={onDocumentClick}
        isLoading={loading}
        information={items}
        error={error}
        accountNumber={accountNumber}
      />
    </Box>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）