当道具使用useEffect(对于编辑表单模态组件)更改时，我如何安全地设置组件的新状态

Question

我有一个模态表单组件，它允许用户编辑表中的行。当编辑对象更改时，我会像这样更新状态。

const [form, setForm] = useState(editObj);
useEffect(() => {
setForm(editObj);
}, [editObj]);

对于上下文，父组件有一个带有"编辑"链接的表，可以执行以下操作：

onClick={() => {
setEditObj(record);
setModalOpen(true);
}}

我需要将其作为状态的一部分的原因是，用户可以通过窗体对其进行编辑，但这是原始记录的副本(如果用户在模态中按"取消"，然后单击另一行，则会忘记前一个对象(。

据我所知，这个useEffect不应该导致无限循环，因为deps指定了[editObj]，只有当用户在不同的行中单击编辑时，它才会改变。

有趣的是，当我在这个屏幕上时，这实际上和预期的一样工作，但当我离开这个屏幕时，它实际上触发了一个中篇循环。我不明白。

Answer 1

解决方案：如果模态不可见，则不渲染模态：

{isModalOpen && (
<EditModal
editObj={editObj}
visible={isModalOpen}
onClose={() => setModalOpen(false)}
/>
)}