React Native中API请求重复调用问题排查与解决求助

常见原因 #

1. React Strict Mode 触发：这是开发环境下的正常行为，Strict Mode会刻意重复执行useEffect、组件构造函数等方法，用来检测潜在的副作用问题，生产环境下不会有这个情况。
2. 组件重复挂载：如果当前组件被父组件多次渲染或挂载（比如在路由切换、条件渲染场景中），会导致useEffect重复执行，进而触发多次请求。
3. 你的FlatList代码存在一处错误：renderItem里用了整个data数组而非单个item，虽然这不会直接导致请求重复触发，但会造成UI显示异常。

解决方案 #

1. 处理Strict Mode导致的开发环境重复请求 #

• 若只是开发环境出现两次请求，无需特殊处理，打包到生产环境后该现象会自动消失。
• 若想在开发环境暂时关闭该行为，可找到项目入口文件（如index.js或App.js），移除包裹组件的<React.StrictMode>标签，但不推荐长期这么做——Strict Mode能帮你提前发现很多潜在的代码问题。

2. 避免组件重复挂载 #

检查父组件的逻辑，排查是否存在不必要的状态更新导致组件重复渲染，或是路由切换时频繁挂载当前组件的情况，针对性优化父组件的渲染逻辑即可。

3. 优化请求配置的定义 #

将请求配置移至useEffect内部，避免每次组件渲染时重复创建对象，虽然当前不会直接引发请求重复，但能提升性能，也避免后续修改依赖时出现问题：

useEffect(() => {
  const fetchData = async () => {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    const raw = JSON.stringify({
      "CariId": 2,
      "CariBakiyeyeSadeceOnayliFaturalarYansisin": false,
      "DonemId": 1,
      "BasTarih": "01.01.2021",
      "BitTarih": "01.01.2023"
    });

    const requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    const response = await fetch("http://192.168.1.30:2828/CodesAndroid.svc/CariHesapListesiDetayli", requestOptions);
    const result = await response.text();
    const parsedResult = JSON.parse(result);
    setData(parsedResult);
  };

  fetchData();
}, []);

4. 修复FlatList的渲染错误 #

修改renderItem代码，正确使用单个item对象展示数据：

<View>
  <FlatList
    data={data}
    renderItem={({ item }) => (
      <View>
        <Text>{item.CariId}</Text>
        {/* 可根据需求展示item的其他字段，比如item.xxx */}
      </View>
    )}
    keyExtractor={item => item.CariId.toString()}
  />
</View>

注意keyExtractor最好返回字符串类型，避免出现不必要的警告。

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