Как очищать стейт в модальном окне при каждом открытии?

Question

[Paul14]

Есть компонент модального окна, в котором инициализировано состояние для инпута и текстовой области.
Компонент появляется при нажатии на кнопки.
Как сделать, чтобы при любом появлении компонента все значения стейта в нем очищались (стали равны пустой строке)?

export default Modal = ({ saveFunc, modalVisible }) => {
  const [values, setValues] = React.useState({ input: "", textarea: "" });

  return (
    <div className="modal" style={{ display: modalVisible ? "block" : "none" }}>
      <input
        value={values.input}
        onChange={(e) => setValues({ ...values, input: e.target.value })}
      />
      <textarea
        value={values.textarea}
        onChange={(e) => setValues({ ...values, textarea: e.target.value })}
      />

      <button
        onClick={() => {
          saveFunc(values);
        }}
      >
        SAVE
      </button>
    </div>
  );
};

codesandbox

Answer 1

[Владислав Грудин]

Очистите стейт полей после сохранения и при следующем открытии окна данных в полях не будет: https://codesandbox.io/s/agitated-voice-6hw2b8?fil...

Comments

[Paul14]

Спасибо. Я думал просто есть какой-то автоматический способ сброса стейта, автоматически при открытии или закрытии (когда окно скрыто из виду).

[Владислав Грудин]

Paul14, так тоже можно. Изучите про методы жизненного цикла компонентов: https://ru.reactjs.org/docs/state-and-lifecycle.html

[Paul14]

Kotmail,

Вот строчка которую я хочу реализовать. То есть при любом закрытии окошка modal.


В в функциональном компоненте componentWillUnmount выражается так:

useEffect(() => {
    // Anything in here is fired on component mount.
    console.log("mount");
    return () => {
      // Anything in here is fired on component unmount.
      console.log("unmount");
      // setValues({ input: "", textarea: "" }
    };
  }, []);

Но это не приводит к желаемому результату. В консоли не отображается "unmount" при закрытии окна, хотя я так понял, компонент в этот момент должен размонтироваться. Вот код:

https://codesandbox.io/s/dazzling-euler-y43q43?fil...

[Владислав Грудин]

Paul14, чтобы хук при демонтировании компонента срабатывал, нужно непосредственно компонент по условию отображать. У Вас же компонент всегда находится в отрендеренном виде, а видимость окна Вы переключаете при помощи стилей внутри компонента. Т.е. при нажатии кнопки "Save" меняется только видимость окна, при этом сам компонент остаётся отрендеренным.

Исправленный вариант с отображением компонента по условию: https://codesandbox.io/s/nostalgic-sanderson-ro59qk

В Вашем случае можно всё-таки обойтись без методов жизненного цикла, т.к. при повторном рендере компонента поля автоматически сбрасываются (принимают значения по умолчанию). При желании можете прописать хук useState и посмотреть результат.

[Paul14]

Kotmail, Большое спасибо