当道具随 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)}
  />
)}