当props通过useEffect更改时(对于编辑表单模式组件),如何安全地设置组件的新状态?

时间:2020-03-05 18:02:32

标签: reactjs react-hooks

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

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

对于上下文,父组件具有一个带有“ edit”链接的表,用于执行此操作:

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

之所以需要将其作为状态的一部分,是因为用户可以通过表单对其进行编辑,但这是原始记录的副本(如果用户在模式中按下“取消”,然后单击另一行,则忘记了先前的对象。

据我所知,这种useEffect不会引起无限循环,因为deps指定了[editObj],只有当用户单击另一行中的edit时,这种变化才会改变。

有趣的是,当我在此屏幕上时,此功能实际上按预期工作,但是当我离开此屏幕时,它实际上触发了无限循环。我不明白

1 个答案:

答案 0 :(得分:0)

解决方案:如果模态不可见,请不要渲染模态:

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