React Native中如何用FlatList避免重复渲染及解决API重复请求

问题根源 #

你当前的代码陷入了无限循环：

• useEffect的依赖数组包含data，意味着只要data变化，就会重新执行useEffect
• 而getCategory函数内部会调用setData(resJson)修改data的值
• 这就形成了闭环：data更新 → 触发useEffect → 调用getCategory → 再次更新data，循环往复直到触发请求次数上限

解决方案 #

1. 仅首次挂载时请求数据
   如果你只需要在组件第一次加载时获取一次数据，把useEffect的依赖数组改成空数组[]，这样只会在组件挂载完成后执行一次：

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

2. 统一异步代码写法
   你现在混用了async/await和.then，可以改成更清晰的全async/await写法，避免逻辑混乱：

   const getCategory = async () => {
     setLoading(true);
     try {
       const res = await fetch(`URL`, {
         headers: {
           'x-api-key': 'API_KEY'
         }
       });
       const resJson = await res.json();
       setData(resJson);
     } catch (e) {
       console.log(e, 'ERROR');
     } finally {
       setLoading(false);
     }
   }
   

3. FlatList的自动渲染
   只要data是React状态变量，FlatList会自动在data更新时重新渲染列表，不需要额外做处理，确保data的更新逻辑合理即可。

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