关闭模式时显示不需要的内容

Posted 2021-04-10

我已经创建了一个模式，该模式可以上传文件，然后在上传后显示成功消息或错误。像这样：

const { showUploadModal } = this.state;          // state for modal
const { uploadMessage } = this.props;            // uploadMessage from reducer
<CustomModal                                     // Reusing this component which creates a modal
    show={uploadMessage || showUploadModal}      // show modal if true
    headerTitle="Upload file"
    message={uploadMessage ? uploadMessage : 'Choose file'}   // show uploadMessage if present
    cancelHandler={this.toggleUploadModal}
>
    {!uploadMessage && uploadModalContent}  // children for the modal (uploadModalContent contains the jsx content which helps in the upload of a file)
</CustomModal>

这是我的toggleUploadModal：

toggleUploadModal = () => {
    const { clearUploadError, uploadMessage } = this.props;
    if (uploadMessage) {
        return clearUploadMessage();        // clearUploadMessage action, (clears from reducer)
    }
    this.setState({ showUploadModal: !showUploadModal });
}

问题是当我的模态显示消息时，我单击关闭按钮，我可以看到uploadModalContent几毫秒。这使UX有点呆板。

我已经尝试了很多事情，例如在setState之后使用回调来清除clearUploadMessage，但是问题仍然存在。我找不到问题的原因，如果有人知道，请告诉我，因为这很重要。

P.S .：如果您对代码有任何疑问，请发表评论，我会尽快答复。

答案

可能会发生，因为您调用了clearUploadMessage，它有时间创建一个新的渲染，其中!uploadMessage将为true，而{！uploadMessage && uploadModalContent}将闪烁您的模式内容。

您可以

1）使用setState的回调在关闭模式后清除您的上载消息>

this.setState({ showUploadModal: !showUploadModal }, clearUploadMessage);

2）使用存在上载消息作为打开模式的条件（仅当您一直有消息出现时才起作用）show = {Boolean（uploadMessage）}

另一答案

如果showUploadModal为false，则可以删除整个组件，如下所示：