Question

我确定这是标准的众所周知的行为，但是我不知道如何解决。每当我使用setState（在本例中为setTheirPokemon）时，关闭都会运行两次。为了使它“一次”运行，我必须在顶部添加额外的变量来检查它是否已经运行，如果已经运行，则将其设置为较早的状态。

        /**
         * Fires when an opponent deletes one of their Pokemon.
         * Used to update the list of opponent Pokemon.
         * @param index The index of the Pokemon to delete.
         */
        socket.on('delete_pokemon', (index: number) => {
            let past: Pokemon[] | null = null

            setTheirPokemon(theirPokemon => {
                if (past === null) {

                    //stuff, isnt important
                    const newTheirPokemon = theirPokemon.filter(pokemon => {
                        return pokemon.index !== index
                    })
                    let newIndex = 0
                    newTheirPokemon.forEach(pokemon => {
                        pokemon.index = newIndex++
                    })

                    //so it won't rerun
                    past = newTheirPokemon
                    return newTheirPokemon
                } else { 
                    return past
                }
            })
        })

是否有更好的方法来执行此操作，或者只运行一次？谢谢。

说明：

该组件位于具有空依赖性数组的useEffect内，所以我认为它只能在安装时运行。这些钩子也来自我消耗的单独的上下文文件，因此如果重要的话，状态不属于此组件。

Answer 1

“这是StrictMode的故意功能。这仅在开发中发生，并且有助于查找进入渲染阶段的意外副作用。我们仅对具有Hooks的组件执行此操作，因为这些组件在Hooks中更可能意外产生副作用错误的地方。” https://github.com/facebook/react/issues/15074

反应：setState挂钩关闭运行两次

1 个答案: