Formik - TypeError: Не удается прочитать свойство 'type' из неопределенного? - PullRequest
Новая
       8

Formik - TypeError: Не удается прочитать свойство 'type' из неопределенного?

1 голос
/ 23 января 2020

Я в значительной степени просто скопировал и вставил этот код отсюда : 

<code>function Checkbox(props) {
  return (
    <Field name={props.name}>
      {({ field, form }) => (
        <label>
          <input
            {...field}
            type="checkbox"
            checked={field.value.includes(props.value)}
            onChange={() => {
              const set = new Set(field.value);
              if (set.has(props.value)) {
                set.delete(props.value);
              } else {
                set.add(props.value);
              }
              field.onChange(field.name)(Array.from(set)); //the problem seems to lie here somewhere!
              form.setFieldTouched(field.name, true);
            }}
          />
          {props.value}
        </label>
      )}
    </Field>
  );
}

function App() {
  return (
    <Formik
      initialValues={{ roles: [] }}
      onSubmit={values => alert(JSON.stringify(values, null, 2))}
    >
      {formik => (
        <div>
          Clicking checks affects `VALUES` and `ERRORS` but never `TOUCHED`...
          <div>
            <Checkbox name="roles" value="admin" />
            <Checkbox name="roles" value="customer" />
          </div>
          <br />
          VALUES:
          <pre>{JSON.stringify(formik.values, null, 2)}
ОШИБКИ: 
{JSON.stringify(formik.errors, null, 2)}
TOUCHED: 
{JSON.stringify(formik.touched, null, 2)}
)} ); }

Песочница, кажется, работает, но всякий раз, когда я проверяю флажок локально, я получаю TypeError: Cannot read property 'type' of undefined

TypeError: Cannot read property 'type' of undefined
(anonymous function)
node_modules/formik/dist/formik.esm.js:659
  656 |   dispatch({
  657 |     type: 'SET_ERRORS',
  658 |     payload: errors
> 659 |   });
  660 | }, []);
  661 | var setValues = useEventCallback(function (values) {
  662 |   dispatch({

Не уверен, что я здесь сделал неправильно?

Ответы [ 2 ]

2 голосов
/ 23 января 2020

Вместо field.onChange использовать вспомогательную функцию setFieldValue

field.onChange(field.name)(Array.from(set)); //the problem seems to lie here somewhere!

заменить на:

form.setFieldValue(field.name,(Array.from(set)));

https://codesandbox.io/embed/formik-checkbox-example-l9p1p?fontsize=14&hidenavigation=1&theme=dark

0 голосов
/ 23 января 2020

В вашем реактиве-редуксе есть некоторая проблема с действием, поэтому я предлагаю вам проверить тип вашего действия, я думаю, что ваш тип действия не определен, поэтому он показывает неопределенное и выдает ошибку.

...