React Native函数组件重置购物车数量遇无限重渲染问题求助

核心问题分析 #

你触发无限重渲染的原因是直接在组件渲染阶段调用了setAddonData([])——比如把重置逻辑写在函数组件顶层、无判断条件的useEffect里，导致每次组件渲染都触发状态更新，进而再次触发渲染，形成循环。

正确解决方案 #

要在Modal关闭的明确触发时机里执行重置操作，而非在渲染流程中直接调用状态更新：

方法1：利用Modal的onVisibleChange回调

React Native的Modal组件自带onVisibleChange属性，当Modal可见状态切换时会触发该回调，你可以在这里判断Modal是否关闭，进而重置购物车数据：

import { Modal } from 'react-native';

// 控制Modal显示的状态
const [modalVisible, setModalVisible] = useState(false);
const [addonData, setAddonData] = useState([]);

// 监听Modal可见状态变化
const handleModalVisibleChange = (isVisible) => {
  setModalVisible(isVisible);
  // 当Modal关闭时（isVisible为false）重置数据
  if (!isVisible) {
    setAddonData([]);
  }
};

// 渲染Modal
<Modal
  visible={modalVisible}
  onVisibleChange={handleModalVisibleChange}
  // 其他Modal配置属性
>
  {/* 你的购物车内容组件 */}
</Modal>

方法2：在关闭Modal的按钮点击事件中重置

如果Modal是通过点击关闭按钮隐藏的，直接在按钮点击事件里同步执行隐藏Modal和重置数据：

const handleCloseModal = () => {
  setModalVisible(false);
  setAddonData([]); // 关闭Modal时同步重置购物车数据
};

// 关闭按钮示例
<TouchableOpacity onPress={handleCloseModal}>
  <Text>关闭购物车</Text>
</TouchableOpacity>

避坑提醒 #

• 绝对不要在组件顶层直接写setAddonData([])，也不要在依赖项错误的useEffect里执行无判断的重置（比如useEffect(() => { setAddonData([]); }, [])，除非你需要组件初始化时就重置）。
• 如果需要在Modal打开时加载初始购物车数据，可以通过useEffect监听modalVisible状态：

useEffect(() => {
  if (modalVisible) {
    // 加载初始购物车数据，比如从接口获取或设置默认值
    setAddonData(initialCartData);
  }
}, [modalVisible]);

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