React+Formik의 validation에서 "in promise"오류가 발생했을 때의 대응

언제부터인가 Validation에서 오류가 발생했을 때 Chrome 콘솔에서

의 오류.
오류는 진정한 의미의 오류가 아니라'정상'검증이 유효할 때 표시됩니다.
낡은 샘플을 옮기면 나오지 않는데, 버전의 문제입니까?원인 불명.

잘못된 코드 보이기 (지금까지)

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가 좋을까...반복 실험, 어쨌든 다음과 같다.
요점은

form의 onSubmit={handleSubmit}

submit 단추가 눌렸을 때submitForm()을 실행하는 중 오류가 발생했습니다

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이어서 버전을 낮춰 보았지만 안 되었다.브라우저의 버전 차이?그렇게 생각하지만 다른 것 같아요.뭐죠?