Javascript 如何使用 React 将状态变量保存和检索到会话存储

我使用的是React 18.2.0，其中我有一个BodyComponent，它将results从API调用存储到状态，并将filters存储在调用中.

BodyComponent在加载时用挂钩从会话存储器中检索results和filters，并在results被更新时更新sessionStorage.

export default function BodyComponent(){

    const [results, setResults] = useState([]);
    const [filters, setFilters] = useState([]);
    
    useEffect(() => {
        if (window.sessionStorage.getItem('results') !== null) {
            setResults(JSON.parse(window.sessionStorage.getItem('results')));
        }
        if (window.sessionStorage.getItem('filters') !== null && filters.length === 0) {
            setFilters(JSON.parse(window.sessionStorage.getItem('filters')));
        }
    }, []);


    useEffect(() => {
        window.sessionStorage.setItem('results', JSON.stringify(results));
    }, [results]);

    return (
    ...
    <FilterComponent filters={filters} setFilters={setFilters}/>
    ...
    )

}

筛选器组件将筛选器更新到会话存储:

export default function FilterComponent(props) {
    const {filters, setFilters} = props; 

    useEffect(() => {
        window.sessionStorage.setItem('filters', JSON.stringify(filters));
    }, [filters]);

    return (
    ...
    )
}

当我导航到另一个react 路由并返回到加载BodyComponent的路由时，filters被保存到会话存储中，BodyComponent成功地检索它们并在加载时将它们传递给FilterComponent.

然而，results并非如此，它们保存到会话存储中，但不会设置为加载时的状态.

我try 了以下几种方法:

• 在BodyComponent的父组件上处理状态和会话存储，认为这将是一个异步状态更新的问题. 当我这样做时，不仅没有解决问题，而且过滤器也不再正确加载.

• 无论我在哪里更新会话存储，都要手动更新它(这是很糟糕的做法，但我已经try 过了)，我认为这会是一个问题，因为挂钩没有正确地检测到更新. 这并没有改变任何事情.

• 将写入会话存储的useEffect复制到涉及的每个组件中. 这也没有改变任何事情.

我遗漏了什么？