Formik - TypeError：无法读取未定义的属性“类型”？答案

【问题标题】：Formik - TypeError: Cannot read property 'type' of undefined?Formik - TypeError：无法读取未定义的属性“类型”？
【发布时间】：2020-01-23 12:26:38
【问题描述】：

我几乎只是copy pasted this code from here：

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)}</pre>
          ERRORS:
          <pre>{JSON.stringify(formik.errors, null, 2)}</pre>
          TOUCHED:
          <pre>{JSON.stringify(formik.touched, null, 2)}</pre>
        </div>
      )}
    </Formik>
  );
}

沙盒似乎在工作，但每当我在本地选中复选框时，我都会收到 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({

不确定我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs typeerror formik

【解决方案1】：

使用 setFieldValue 辅助函数代替 field.onChange

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

【讨论】：

【解决方案2】：

如果有人在产生上述错误的基础上偶然发现这一点，可能是因为您错过了将initialValues 添加到Formik 组件。

通过添加来修复它

<Formik initialValues={{}} onSubmit={handleSubmit}>

这为我解决了问题！

【讨论】：

是的，添加 initialValues 为我修复了它。
这确实解决了问题，但控制台会生成不同的警告：“警告：组件正在更改要控制的不受控制的输入。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。”。我不知道表单是否会继续按预期工作，但似乎如果您希望初始字段值全部为空白，最好明确指定。例如initialValues={{"field1": "", etc...}}

【解决方案3】：

您的 react-redux 中存在一些操作问题，所以我建议您检查您的操作类型，我认为您的操作类型未定义，这就是它显示未定义并出现错误的原因。

【讨论】：