Как можно безопасно установить новое состояние компонента при смене реквизита с помощью useEffect (для модального компонента редактирования формы)?

Question

У меня есть компонент модальной формы, который позволяет пользователю редактировать строку в таблице. Я обновляю состояние таким образом, когда изменяется объект редактирования.

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

Для контекста у родительского компонента есть таблица со ссылкой «edit», которая делает это:

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

Причина, по которой я хочу, чтобы это было частью состояния, заключается в том, что пользователь может редактировать его через форму, но это копия исходной записи (и если пользователь нажимает «отменить» в модальном режиме, а затем нажимает на другую строку, предыдущий объект забывается).

Из того, что я понимаю, этот useEffect не должен вызывать бесконечное l oop, потому что deps указал [editObj], который изменяется только тогда, когда пользователь нажимает правку в другой строке.

Интересно, что на самом деле это работает, как и ожидалось когда я нахожусь на этом экране, но когда я покидаю этот экран, это когда он фактически вызывает infinte l oop. Я не понимаю этого.

Answer 1

Решение: не отображать модальное изображение, если модальное не видно:

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