反应：设置吊钩闭合运行两次

Question

我确信这是标准的，众所周知的行为，但我不知道如何修复它。每当我使用setState（在本例中是setTheirpokeOn）时，闭包运行两次。为了让它“一次”运行，我必须在顶部添加额外的变量，以检查它是否已经运行，如果已经运行，则将其设置为之前的状态。

        /**
         * 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内部，具有一个空的依赖性数组，因此我认为它应该只在mount上运行。钩子还来自我使用的一个单独的上下文文件，因此状态不属于这个组件，如果这很重要的话。

Answer 1

“这是StrictMode的一个故意功能。这只发生在开发过程中，有助于发现放入渲染阶段的意外副作用。我们只对带有挂钩的组件执行此操作，因为这些组件更可能在错误的位置意外产生副作用。”https://github.com/facebook/react/issues/15074