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

Question

我有一个奇怪的问题…我正在打开从graphql查询返回的blob，这是一个pdf..如果我启用浏览器弹出窗口拦截器，它会像预期的那样工作，我确实会在url栏中收到一条消息，说一个弹出窗口被阻止了。如果我将它设置为允许弹出窗口，我将得到50多个pdf选项卡和错误消息提示"Too many re-renders">

如果我去掉"&&closeModal()";从

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

我只打开了一个pdf，但调用页面变成空白，在控制台中出现了不同的错误信息:

未捕获错误:对象作为React子对象(found: [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>

Answer 1

首先，您可以尝试在渲染之外管理所有pdf逻辑，例如:

在你的返回:

{checkTileType(fileType)};

添加新功能:

function checkTileType(type) {
if (type.includes('htm')) {
return <Box /> 
}
if (type.includes('pdf')) {
if (isIE) {
return <Box> ... </Box>;
}

closeModal();
window.open(documentSource, "_blank");
return;
}
}