控制台三次输出（含undefined），Axios是否发起三次请求？

结论先行：Axios只发起了1次请求，控制台的三次输出是React组件的多次渲染导致的，并非重复发送服务器请求。

渲染与输出的对应逻辑： #

• 第一次渲染：组件初始化时，data的初始值为undefined，所以控制台输出undefined，此时useEffect还未执行。
• 第二次渲染：useEffect中的请求成功返回后，调用setData(data)更新状态，触发组件重新渲染，此时data已拿到接口返回值，控制台输出数据。
• 第三次渲染：请求完成（无论成功失败）后调用setIsLoading(false)，再次更新状态，组件再次渲染，此时data已是有效值，所以控制台再次输出数据。

验证请求次数的方法： #

打开调试工具的Network面板（React Native可使用Flipper或Chrome调试工具的Network标签），你会看到仅存在1次针对目标接口的GET请求，不存在额外请求。

优化控制台输出的小技巧： #

如果不想看到重复的data输出，可以将console.log(data)移到setData的回调里，或者用useEffect监听data变化再打印：

React.useEffect(() => {
  console.log(data);
}, [data]);

内容的提问来源于stack exchange，提问作者deekep