2

我正在创建一个配方应用程序并使用上下文 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>
    );
}
4

0 回答 0