我有一个模式表单组件,允许用户编辑表中的一行。当编辑对象更改时,我会像这样更新状态。
const [form, setForm] = useState(editObj);
useEffect(() => {
setForm(editObj);
}, [editObj]);
对于上下文,父组件具有一个带有“ edit”链接的表,用于执行此操作:
onClick={() => {
setEditObj(record);
setModalOpen(true);
}}
之所以需要将其作为状态的一部分,是因为用户可以通过表单对其进行编辑,但这是原始记录的副本(如果用户在模式中按下“取消”,然后单击另一行,则忘记了先前的对象。
据我所知,这种useEffect不会引起无限循环,因为deps指定了[editObj],只有当用户单击另一行中的edit时,这种变化才会改变。
有趣的是,当我在此屏幕上时,此功能实际上按预期工作,但是当我离开此屏幕时,它实际上触发了无限循环。我不明白
答案 0 :(得分:0)
解决方案:如果模态不可见,请不要渲染模态:
{isModalOpen && (
<EditModal
editObj={editObj}
visible={isModalOpen}
onClose={() => setModalOpen(false)}
/>
)}