React Native添加确认模态框触发Too many re-renders无限重渲染错误

问题原因 #

这个Too many re-renders报错是因为代码触发了无限渲染循环，常见的触发场景和你代码里的隐患如下：

• 你大概率给「完成任务」按钮的onPress属性赋值时，直接执行了状态更新函数而不是传入函数引用。如果写的是onPress={closeModal(itemToDelete)}，组件渲染时就会立刻执行closeModal修改状态，状态更新又触发重新渲染，循环往复就触发了React的渲染次数限制。
• 你代码里的状态没有设置合理初始值，且状态更新顺序不对，也可能触发异常重渲染：
  • task、itemToDelete状态没有初始值，默认是undefined，部分场景下会导致组件异常更新
  • handleRemoveTask里先打开模态框再存储要删除的索引，模态框打开瞬间取到的还是旧的待删索引，可能导致误操作

修复方案 #

1. 修正onPress的写法，用箭头函数包裹方法调用，确保只有点击按钮时才执行逻辑：

<TouchableOpacity style={styles.closeButton} onPress={() => closeModal()}>
  <Text style={styles.modalText}>Complete Task</Text>
</TouchableOpacity>

2. 给所有状态添加合理初始值：

const [task, setTask] = useState('');
const [taskItems, setTaskItems] = useState([]);
const [modalVisable, setModalVisable] = useState(false);
const [itemToDelete, setItemToDelete] = useState(null);

3. 调整handleRemoveTask的状态更新顺序，先存待删索引再打开模态框：

const handleRemoveTask = (index) => {
  setItemToDelete(index);
  setModalVisable(true);
};

4. 简化closeModal方法，直接读取已存储在state里的待删索引即可，不需要额外传参，关闭模态框后清空待删索引避免后续误操作：

const closeModal = () => {
  if (itemToDelete === null) return
  completeTask(itemToDelete)
  setModalVisable(false);
  setItemToDelete(null);
};

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