Closed2021/10/16にクローズ4

formikで入力すると初期値に戻されるエラー

発生したエラー内容はこちら↓

A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

内容を見るに…値がundefinedに変わっちゃったよ？ということらしいです。

useFormikを使っている
Arrayで入力を試みている

配列の要素がundefinedになる瞬間があるので、それが原因か？

トト犬

問題を追っていくと、入力と同時に初期値に戻されているようでした。

しかも、useEffectで更新したはずの初期値が、更新前の初期値となっていました…

Formikで初期値を正しく更新するには、「enableReinitialize」をtrueにして渡す必要があるようです！

useStateで定義した変数をinitialValuesに渡す。
これをsetStateで更新することで、正しくinitialValuesが更新されるようです！

const [initialValues, setInitialValues] = useState({
  name: "初期値",
  description: "詳細の説明ですよ",
  comments: ["hoge"],
} as FormPersona);

const formik = useFormik({
  enableReinitialize: true,
  initialValues: initialValues,
  onSubmit: (values) => {
    console.log("⛰⛰⛰⛰⛰⛰", JSON.stringify(values, null, 2));
  },
});

useEffect(() => {
  console.log("えいや");
  setInitialValues(filterPersona(activePersona));
  formik.values = filterPersona(activePersona);
}, [activePersona]);

トト犬

公式ドキュメント：https://formik.org/docs/api/formik#enablereinitialize-boolean
参考コード：

https://stackoverflow.com/questions/66372097/updating-one-of-the-formik-initial-values-with-state-resets-all-other-values

トト犬

同エラーについては、こちら↑を参考にしたら解決しました！

どうやらprops.formikが途中で{}となってしまい、initialValuesとkeyの差分が発生していることが原因だったようです。

formik.valuesを直で参照せずに、以下のように初期値を設けることで回避できました！

let value = { name: "", description: "", comments: [] };
  if (Object.keys(formik.values).length > 0) {
    value = formik.values;
  }

このスクラップは2021/10/16にクローズされました