ContextAPI在页面重新加载时以及在新选项卡中打开时丢失状态

Question

我正在创建一个食谱应用程序，并使用上下文API来确保我从API调用中获取的数据在我的所有组件中都可用。一切乍一看都是应该的。

问题在于，当我在新标签页中重新加载/打开组件（这些组件取决于从上下文提供程序传递的状态）时，由于状态为空，一切都会中断。

我检查了堆栈溢出的答案，但是似乎没有一个答案不是hacky。在重新加载后，有人对我如何使数据持久保存在contextApi上有任何提示吗？

由于此问题而导致组件损坏的示例如下所示

import React, { useContext } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import RecipeCard from '../RecipeCard/RecipeCard';
import './ResultsPage.css';
import NavBar from '../NavBar/NavBar';
import { CocktailContext } from '../../context/CocktailContext';
import { v4 as uuidv4 } from 'uuid';
import LayOut from '../LayOut/LayOut';

export default function ResultsPage(props) {
    const { recipes } = useContext(CocktailContext);
    const drink = props.match.params.name;

    return (
        <LayOut>
            <Container fluid className="ResultsPage ">
                <NavBar />
                <Col sm={12} className="ResultsPage-header-content">
                    <p className="ResultsPage-p font-style-2">You know what's always a good idea?</p>
                    <h1 className="ResultsPage-h2 font-style-1">{props.match.params.name.toUpperCase()}!</h1>
                </Col>
                <Row>
                    <Col>
                        <Row className="ResultsPage-recipe-cards mb-5">
                            {recipes &&
                                recipes.map((recipe) => (
                                    <RecipeCard
                                        strDrink={recipe.strDrink}
                                        strDrinkThumb={recipe.strDrinkThumb}
                                        strGlass={recipe.strGlass}
                                        drink={drink}
                                        key={uuidv4()}
                                    />
                                ))}
                        </Row>
                    </Col>
                </Row>
            </Container>
        </LayOut>
    );
}