Я нахожусь в процессе создания приложения рецепта и использую контекстный API, чтобы гарантировать, что данные, которые я извлек из вызова API, доступны во всех моих компонентах. На первый взгляд все работает как надо
Проблема в том, что когда я перезагружаю / открываю компонент (это зависит от состояния, которое передается из провайдера контекста) в новой вкладке, все разрывается, так как состояние пустое.
Я проверил переполнение стека для ответов, но ни один из них, кажется, не дает ответ, который не является хакерским. У кого-нибудь есть какие-либо советы о том, как я могу сохранить свои данные в 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>
);
}