reactjs 避免React - useState上的无限循环

wfveoks0  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(205)

如何将一个导出的函数(在上下文中)放入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吗?
需要帮助,谢谢!

e4eetjau

e4eetjau1#

useCallback不关心回调函数有多少参数,因为这不会改变函数的存储位置。
所提供的代码中没有useEffect
如果useLocalStorage钩子的编写方式正确,那么它的setter函数应该已经 Package 在useCallback中,这样它的内存位置就不会改变。
当您将getPokemon Package 在useCallback中时,它唯一的依赖项是setPokemon

const getPokemon = useCallback((newlyPokemon : Pokemon | null) => {
  newlyPokemon && setPokemon(prevState => [...prevState, newlyPokemon]);
}, [setPokemon]);

如果您担心重新呈现,请查看状态管理器以控制重新呈现哪些元素,因为对pokemon的任何更改都将导致PokemonProvider的每个子元素重新呈现

相关问题