React 上下文不保存页面之间的数据

Question

我正在尝试在 React 中实现搜索历史记录。我在历史记录中添加了一些搜索，但是当我尝试在另一个页面中获取它们时，历史记录数组为空。提供商代码是这样的：

import React, { useContext } from "react";
import { useState } from "react";

const HistoryContext = React.createContext();
const AddSearchContext = React.createContext();
const ClearHistoryContext = React.createContext();

export function useHistoryContext(){
    //return useContext(HistoryContext);
    return useContext(HistoryContext);
}

export function useAddSearchContext(){
    return useContext(AddSearchContext);
}

export function useClearHistoryContext(){
    return useContext(ClearHistoryContext);
}

export function HistoryProvider(props){

    const [history, setHistory] = useState([]);

    function addSearch(search){
        setHistory(prevHistory => [...prevHistory, search]);
        console.log(history);
    }

    function clearHistory(){
        setHistory([]);
    }

    return (
        <HistoryContext.Provider value={history}>
            <AddSearchContext.Provider value={addSearch}>
                <ClearHistoryContext.Provider value={clearHistory}>
                    {props.children}
                </ClearHistoryContext.Provider>
            </AddSearchContext.Provider>
        </HistoryContext.Provider>
    );
}

我将搜索添加到历史记录的代码是这样的：

const CityPage = () => {

    const addSearch = useAddSearchContext();
    const [zip, setZip] = useState(values.defaultzip);

    useEffect(() => {
        //...
        addSearch(zip); //add the zip to the history
        //...
    }, []);
    
    const handleOnClick = async () => {
        const zipValue = document.getElementById("input_zip").value;
        setZip(zipValue);
    };

    const content = (<>
        <div id="search_div">
            <input type="text" id="input_zip"/>
            <button id="search_button" onClick={handleOnClick}>Search</button>
        </div>
        </>
    );

    return (
        <MainLayout id="politicInfo">
            {content}
        </MainLayout>
    );
}

export default CityPage;

我尝试获取它的代码是： 从“反应”导入反应； 从“../MainLayout/MainLayout”导入 MainLayout； 从 "../../providers/HistoryProvider" 导入 { HistoryProvider, useHistoryContext };

const HistoryPage = () => {

const history = useHistoryContext();
//console.log(history);

return (
    <MainLayout>
        <h1>Contenido</h1>
    </MainLayout>
);

}

导出默认历史页面；`

App.js代码是这样的：

import React from 'react';
import { ThemeProvider } from './providers/ThemeProvider';
import { HistoryProvider } from './providers/HistoryProvider';
import './App.css';
import { LangProvider } from './providers/LangProvider';
import { AppRouter } from './AppRouter';

function App() {
  return (
    <HistoryProvider>
      <LangProvider>
        <ThemeProvider>
          <AppRouter />
        </ThemeProvider>
      </LangProvider>
    </HistoryProvider>
  );
}

export default App;

console.log

在 HistoryProvider

addSearch

方法显示历史数组与我介绍的搜索，但

console.log

在 HistoryPage 上发布显示一个空数组。

其他两个提供商工作正常。

MainLayout 只是一个带有标题和主体的布局。

抱歉，如果这是一个明显的错误，我正在开始使用 React。提前致谢。