如何将一个导出的函数(在上下文中)放入useEffect中并接收参数,以便该函数中的setState不会导致无限的重新呈现。
功能:
export const PokemonProvider = ({children} : {children: ReactNode}) => {
const [pokemon, setPokemon] = useLocalStorage<Pokemon[]>('pokemon', [{id: 123, name: 'mariomon', type: 'fogo', imageUrl: 'www.google.com'}]);
const getPokemon = (newlyPokemon : Pokemon | null) => {
newlyPokemon && setPokemon(prevState => [...prevState, newlyPokemon]);
};
return <PokemonContext.Provider value={{getPokemon, pokemon}}>
{children}
</PokemonContext.Provider>
}
getPokemon可能是这里的问题,即使我对React的了解有限,如果我使用useCallback,我如何访问newlyPokemon,例如?我应该使用useRef并在getPokemon上为它分配newlyPokemon值,然后在useEffect中设置Pokemon吗?
需要帮助,谢谢!
1条答案
按热度按时间e4eetjau1#
useCallback
不关心回调函数有多少参数,因为这不会改变函数的存储位置。所提供的代码中没有
useEffect
。如果
useLocalStorage
钩子的编写方式正确,那么它的setter函数应该已经 Package 在useCallback
中,这样它的内存位置就不会改变。当您将
getPokemon
Package 在useCallback
中时,它唯一的依赖项是setPokemon
。如果您担心重新呈现,请查看状态管理器以控制重新呈现哪些元素,因为对
pokemon
的任何更改都将导致PokemonProvider
的每个子元素重新呈现