React Native中useState结合console.log触发多次打印问题咨询

核心问题 #

你这段代码会导致无限循环请求+重复日志刷屏，根源有三个：

1. 无限渲染循环：如果GetGoogleData是在组件渲染阶段直接调用的，每次组件渲染都会执行该函数；而函数里的setLocationData会更新状态，触发组件重新渲染，进而再次调用GetGoogleData，形成无限循环，自然console.log会疯狂输出。
2. 变量名大小写错误：console.log(LocationData)里的变量名是大写开头，但你定义的状态变量是locationData，这会打印undefined（除非全局存在同名变量）。
3. 请求方法错误：Google Places Details API仅接受GET请求，你用POST会导致请求失败。

修复后的代码 #

function GetGoogleData() {
  const [locationData, setLocationData] = React.useState(undefined);
  // 假设locationID是外部传入的变量
  const APIURL = `https://maps.googleapis.com/maps/api/place/details/json?placeid=${locationID}&key=xxxxxxxxxxxxxxxxxxxxxxxxxxx`;

  React.useEffect(() => {
    // 封装异步请求逻辑
    const fetchLocationData = async () => {
      try {
        const response = await fetch(APIURL, {
          method: 'GET', // 修正为API要求的GET请求
          headers: {
            'Accept': 'application/json'
            // GET请求无需Content-Type，因为没有请求体
          }
        });
        const data = await response.json();
        setLocationData(JSON.stringify(data));
        // 仅在请求成功后打印数据，避免无效输出
        console.log(locationData);
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    // 仅当locationID存在时才发起请求
    if (locationID) {
      fetchLocationData();
    }

    // 清理函数：组件卸载时中止未完成的请求，避免内存泄漏
    const controller = new AbortController();
    return () => controller.abort();
  }, [locationID]); // 依赖数组：仅当locationID变化时重新执行请求
}

关键修复点 #

• 用React.useEffect包裹请求逻辑，通过依赖数组[locationID]控制请求触发时机，彻底终止无限循环。
• 修正请求方法为GET，匹配Google Places API的要求。
• 将console.log移到请求成功的回调内，同时修正变量名大小写，避免无效重复打印。
• 添加请求中止逻辑，防止组件卸载时残留未完成请求导致内存泄漏。

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