ContextAPI теряет состояние при перезагрузке страницы и при открытии в новой вкладке - PullRequest
Новая
       34

ContextAPI теряет состояние при перезагрузке страницы и при открытии в новой вкладке

0 голосов
/ 03 мая 2020

Я нахожусь в процессе создания приложения рецепта и использую контекстный 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>
    );
}
...