いつの頃からかValidationでエラーの際に、ChromeのConsoleに、
というようなエラーが表示されるようになっていた。
エラーは本当の意味でのエラーではなく、"正常に"バリデーションが効いた際に表示されているようだ。
古いサンプルを動かしたら出ないのでバージョンの問題か?。原因は不明。
エラーが表示されるコード(いままで)
render={}としている以外は本家のサンプルと変わらない。
render=()使っても出ます。
import React from 'react';
import './App.css';
import { Formik } from 'formik';
import * as Yup from 'yup';
class App extends React.Component {
render() {
return (
<div style={{padding:30}}>
<Formik
initialValues={{ name: '' }}
onSubmit={(values) => alert(JSON.stringify(values))}
validationSchema={Yup.object().shape({
name: Yup.string().required(),
})}
>
{
({ handleSubmit, handleChange, handleBlur, values, errors, touched, setErrors }) => (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
id="name"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
<div style={{color:'red'}}>
{errors.name}
</div>
<div>
<button type="submit">submit</button>
</div>
</form>
)
}
</Formik>
</div>
);
}
}
export default App;
このコードを実行してValidationを効かせると、
という感じになる。。。
ほっといてもいいが、気持ち悪いので対応を考えました。
改善(案)
エラーメッセージ自体は「Promiseのrejectがcatchされてないぞ!」というものなので、catchするようにすればよい。
が、どこでcatchすればいいのだろう・・・と試行錯誤し、とりあえず下記のようにしました。
要点は、
- formのonSubmit={handleSubmit}をやめる
- submitボタンが押されたときにsubmitForm()を実行し、そこでエラーをcatch
- いちおうsetErrorsでerrorをerrorsに反映(これはやらなくても動く)
という感じ。
handleSubmitをオーバーライドしてもいい気がしたが、一旦対応とする。
import React from 'react';
import './App.css';
import { Formik } from 'formik';
import * as Yup from 'yup';
class App extends React.Component {
render() {
return (
<div style={{ padding: 30 }}>
<Formik
initialValues={{ name: '' }}
onSubmit={(values) => alert(JSON.stringify(values))}
validationSchema={Yup.object().shape({
name: Yup.string().required(),
})}
>
{
({ handleSubmit, handleChange, handleBlur, values, errors, touched, submitForm, setErrors }) => (
+ <form>
<input
type="text"
name="name"
id="name"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
<div style={{ color: 'red' }}>
{errors.name}
</div>
+ <div>
+ <button type="submit" onClick={(e) => {
+ e.preventDefault();
+ submitForm().catch(error => setErrors(error));
+ }}>submit</button>
+ </div>
</form>
)
}
</Formik>
</div>
);
}
}
export default App;
上記を実行すると、
いちおう何も出ない。
その他
以前に自分が書いたコードでは出てなかった。その際のFormikのバージョンは2.0.6で、現在は2.0.7なのでバージョンを落としてみたが、だめだった。ブラウザのバージョン差か?と思ったりもしたが、違うみたい・・・。なんだろう。