Javascript 如何使用ReactJS中调用外部API的结果处理localstorage？

主要的黄金是从一个外部API制作一个serch条。我正在使用上下文API提供一个全局状态，并使用一个自定义异步钩子来调用pokeapi（我当前可用），以存储在localstorage中搜索的数据，但问题是我存储的数据来自一个在事件中更改的状态，所以当我重新加载页面时，状态是未定义的，并将本地存储值设置为未定义的。。。有更好的方法来解决这个问题吗

背景：

import React,{createContext, useEffect} from 'react'
import { usePokemonReducer } from './PokemonReducer'
import {FIND_POKEMON} from './Actions'
export const PokemonContext = createContext()

const PokemonProvider = ({children}) => {
    
    const [state, dispatch] = usePokemonReducer(()=>{
        const localData = localStorage.getItem('pokemons');
        return localData ? JSON.parse(localData) : [];
    });

    const { pokemon } = state;

    const findPokemon = (pokemon) => dispatch({ type: FIND_POKEMON, pokemon})

    useEffect(() => {
        localStorage.setItem('pokemons', JSON.stringify(pokemon.pokemon));
    }, [pokemon]);

    const providerValues = {
        pokemon,
        findPokemon,
    }

    return (
        <PokemonContext.Provider value={providerValues}>
            {children}
        </PokemonContext.Provider>
    )
}

export default  PokemonProvider;

---

如果条件允许，您可以直接使用。如果pokemon未定义，则不需要将项设置为localStorage

useEffect(() => {
    if (pokemon.pokemon !== undefined) {
        localStorage.setItem('pokemons', JSON.stringify(pokemon.pokemon));
    }
}, [pokemon]);

---

我不熟悉reactjs，但我认为现在不是使用localStorage的适当时机。通常，localStorage用于保存数据，因此无需重新查询。这意味着您的页面将从本地存储读取，而不是执行查询，但我在您的代码中没有看到任何类似的情况。

useEffect(() => {
    if (pokemon.pokemon !== undefined) {
        localStorage.setItem('pokemons', JSON.stringify(pokemon.pokemon));
    }
}, [pokemon]);