React Native中setRenderData多次触发导致FlatList删除条目异常如何解决

核心问题原因 #

• 组件顶层直接触发上传逻辑：你在组件函数的主体位置写了if(uri!==undefined){ handleUploadPhoto(); }，每次组件重渲染时只要uri存在就会执行上传请求，请求成功后调用setRenderData会再次触发组件重渲染，形成无限循环，是setRenderData持续重复调用的核心原因。
• 删除逻辑存在闭包陷阱：删除条目时的setRenderData直接依赖外部的renderData状态，闭包会缓存旧的状态值，可能导致删除操作后的数据不符合预期。
• 清理逻辑类型错误：useEffect的清理函数将数组类型的renderData设置为对象{}，类型不匹配，会导致后续FlatList渲染异常。
• 子组件重复创建：Item组件定义在父组件内部，每次父组件重渲染都会重新生成该组件，触发FlatList不必要的重渲染，加剧循环问题。

具体修复步骤 #

1. 调整上传触发逻辑，仅在uri变更时执行上传
   删除原来组件顶层的if(uri!==undefined){ handleUploadPhoto(); }代码，新增useEffect监听uri变化：

useEffect(() => {
  // 仅当uri存在时才触发上传
  if (!uri) return;
  handleUploadPhoto();
}, [uri]);

2. 修复删除逻辑的闭包问题，使用函数式更新状态

const onRemove = id => e => {
  // 函数式更新可以直接获取最新的状态值，避免闭包缓存旧状态
  setRenderData(prevData => prevData.filter(item => item.Id !== id))
};

3. 移除错误的useEffect清理逻辑
   原来的清理逻辑没有实际作用，且设置了错误的状态类型，直接删除即可：

// 删除这段无用代码
// useEffect(() => {
//   return () => {
//     setRenderData({});
//   };
// }, []);

4. 优化子组件定义，避免重复创建
   将Item组件移到TextExtractor组件外部，渲染时传入需要的方法：

// 组件外部定义Item
const Item = ({ title, id, onRemove }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
    <TouchableOpacity onPress={onRemove(id)}>
      <Image
        style={{width:30,height:30}}
        source={require('../assets/delete.png')}
      />
    </TouchableOpacity>
  </View>
);

// TextExtractor内部使用时传入onRemove
const renderItem = ({ item }) => (
  <Item 
    title={item.Text}
    id={item.Id}
    onRemove={onRemove}
  />
);

5. 额外优化

• 删除代码末尾多余的闭合括号});，避免语法错误。
• 上传成功后的日志不要直接打印renderData，状态更新是异步的，打印的会是旧值，改为打印res.data即可。
• 可以给handleUploadPhoto加上useCallback包裹，依赖设置为[pickerResponse]，减少不必要的函数重建。

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