为什么我的 session 存储变量 'header' 为空

Question

我正在尝试使用 react-pdf 创建 pdf。在 App.js 中，我将我的 'header' 信息存储在 Session 存储中。我当前的发票组件：

import React from 'react';
import { Page, Document, Image, StyleSheet } from '@react-pdf/renderer';
import InvoiceTitle from './InvoiceTitle'
import BillTo from './BillTo'
import InvoiceNo from './InvoiceNo'
import InvoiceItemsTable from './InvoiceItemsTable'
import InvoiceThankYouMsg from './InvoiceThankYouMsg'

const styles = StyleSheet.create({
    page: {
        fontFamily: 'Helvetica',
        fontSize: 11,
        paddingTop: 30,
        paddingLeft: 60,
        paddingRight: 60,
        lineHeight: 1.5,
        flexDirection: 'column',
    },
    logo: {
        width: 74,
        height: 66,
        marginLeft: 'auto',
        marginRight: 'auto'
    }
});

const headerString = sessionStorage.getItem("header");
const header = JSON.parse(headerString);

const Invoice = ({ invoice }) => (
    <Document>
        <Page size="A4" style={styles.page}>
            <Image style={styles.logo} src={header.logoImage} /> <<== Error on this line
            <InvoiceTitle title='Invoice' />
            <InvoiceNo invoice={invoice} />
            <BillTo invoice={invoice} />
            <InvoiceItemsTable invoice={invoice} />
            <InvoiceThankYouMsg />
        </Page>
    </Document>
);

export default Invoice

我收到 header is null 错误，尽管我可以在 Session 存储下的开发工具中看到它。为什么 header 为空？

更新

如果我刷新 {F5} 页面，一切都会正常加载。

Answer 1

我只是通过传递 header object.

来避免这个问题

const Invoice = ({ invoice, header }) => (
    <Document>
        <Page size="A4" style={styles.page}>
            <Image style={styles.logo} src={{ data: "image/png;base64," + header.logoImage}} />
            <InvoiceTitle title='Invoice' />
            <InvoiceNo invoice={invoice} />
            <BillTo invoice={invoice} />
            <InvoiceItemsTable invoice={invoice} />
            <InvoiceThankYouMsg />
        </Page>
    </Document>
);

为什么我的 session 存储变量 'header' 为空

Why is my session storage variable 'header' Null

javascript

firefox-developer-tools

reactjs

react-pdf