即使使用 useCallback，在组件安装时也会调用 UseEffect 两次

Question

我有以下问题。我有一个组件需要在安装时调用 API。我在 useCallback 中进行调用，如下所示：

const sendCode = useCallback(() => {
        console.log('InsideSendCode');
    }, []);

然后我在 useEffect 中调用这个函数，如下所示：

useEffect(() => {
        sendCode();
    }, [sendCode]);

问题是，即使使用 useCallback，该消息也会在控制台中显示两次，我发现这将是唯一的选择。

我知道 StrictMode，但我不想禁用它。

如果每个人都能发表意见，那就太好了。

谢谢。

Answer 1

这是严格模式下的标准行为：

当严格模式打开时，React 会挂载组件两次（仅在开发中！）来对您的效果进行压力测试。

最初react只是调用两次render来检测是否有一些副作用，但后来他们还在初始挂载期间添加了两次调用效果，以确保您很好地实现了清理功能。这仅适用于严格模式 AFAIK。

我建议您阅读上面的链接。你有几个选择：

• 如果您正在进行的 API 调用是 GET 请求，只是获取一些信息，那么调用两次就没有太大害处。
• 您可以使用 aref来跟踪它是否是第一次安装，然后useEffect仅在这是第一次安装时相应地发出请求。虽然官方建议中没有列出这种方法，但我想你可以将其作为最后的手段；它在某个时候被记录下来。丹·阿布拉莫夫还提到你可以将其用作最后措施，只是他们不鼓励这样做。
• 禁用严格模式