Formik - 类型错误:无法读取未定义的属性“类型”?

2023-12-31

我几乎刚刚从这里复制粘贴此代码 https://codesandbox.io/s/formik-checkbox-example-96miz?from-embed :

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({

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


如果有人偶然发现了这一点,并产生了上述错误,可能是因为您错过了添加initialValues to Formik成分。

只需添加即可修复它

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

这为我解决了!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Formik - 类型错误:无法读取未定义的属性“类型”? 的相关文章

随机推荐

  • 从服务访问组件数据

    我在 Angular 7 中有一个调用 API 的服务 我想使用 API 调用中的组件收集的一些数据 这是该组件的相关部分 import Component OnInit from angular core import IPrompt f
  • Delphi 7:如何实现多线程?

    我在主窗体中有一个按钮 当用户点击该按钮时 将执行以下过程 begin Process done FALSE Process Result Clear cmdProcess CommandLine 34 AppPath getdata ex
  • Haskell Monad - 列表中的 Monad 如何工作?

    为了理解 Monad 我提出了以下定义 class Applicative f where purea a gt f a app f a gt b gt f a gt f b class Applicative m gt Monadd m
  • C++ 静态库可以链接到共享库吗?

    假设我有一个静态 C 库 static lib 并且我想从 C 共享库 例如 shared lib 调用一些函数 是否可以 现在假设我有另一个共享库 例如shared2 lib 它链接到static lib 但不链接到shared lib
  • 需要添加粘贴特殊条件a copy.destination for循环

    我有一系列数据在书中的每个工作表中处于相同位置 并且将始终处于该位置 运行宏时 应复制数据并将其添加到报告表中 我有那部分工作 但我需要使用特殊的粘贴 PasteSpecial xlPasteValues 因为范围内有公式 我不确定在这段代
  • 转发器中的动态下拉列表,ASP.NET

    基本上 我的代码来自这里 http ranafaisal wordpress com 2009 02 17 dynamically adding removing textboxes in aspnet repeater http rana
  • eclipse 不显示 Avd 管理器窗口和 android 项目

    我在用着Windows 7的 and 日食赫利俄斯 我成功安装了所有软件包并且可以运行avd在命令行上 但是Eclipse没有显示AVD管理器窗口和我的android项目 为什么 我知道这个答案有点晚了 但对于后代来说 这就是它的完成方式
  • 获取iOS今日扩展的宽度

    我想获取我的小部件 今天扩展的宽度值 我不能使用self view frame size width因为它返回整个屏幕宽度 而不是实际的小部件宽度 在 iPad 上 扩展的宽度不等于屏幕宽度 我该如何获取小部件的实际宽度 不要读取 self
  • 按字符串的一部分对字符串列表进行排序

    我有一个具有以下格式的字符串列表 variable1 name1 variable2 name2 variable3 name3 我想根据以下内容对列表进行排序 nameX 部分 按字母顺序排列 我该怎么做呢 要更改排序键 请使用the k
  • Compass CSS 框架 - 将 Bootstrap 与 SASS 结合使用

    我想将 Bootstrap 与 SASS 一起使用 但我找不到任何教程或解释如何将 Bootstrap 与 SASS 一起使用 我唯一发现的是通过红宝石宝石安装 指南针创建我的新项目 r bootstrap sass using boots
  • 如何异步加载 JSON (iOS)

    我的应用程序使用 JSON 解析来自 Rails 应用程序的信息 我正在寻找一种异步加载 JSON 的方法 但由于代码的复杂性 我无法让我的代码与我找到的示例一起使用 我需要做什么才能异步加载 JSON 谢谢 void viewDidLoa
  • MySQL - 我应该使用哪种哈希算法?

    我有一个包含 360000 个单词 条目 的大型韵律数据库 每个单词都有一个类别 例如 sheet 和 meet 都有类别 eet 在我的网站空间上 查找合适韵律的查询有点慢 因此我想通过将类别加密为仅包含数字的哈希来加快速度 我听说这样更
  • 创建 PostgreSQL 函数时使用 Array_append 给我语法错误

    这是代码 CREATE OR REPLACE FUNCTION primes IN integer RETURNS TEXT AS DECLARE counter INTEGER 1 primes int mycount int BEGIN
  • 将 C++ lambda 传递给旧的 C 函数指针

    我必须为旧的 C 库创建一个 C 包装器 在类方法中 我必须调用一个 c 函数 该函数还需要一个函数指针 它是一个事件处理程序 并且该函数需要一个在事件发生时触发的函数 一个简单的例子是这样的 void myclass add handle
  • 堆转储大小与 hprof 大小

    最近 当我的 jboss 服务器运行 xms 为 4096m xmx 为 4096m permsize 为 512m 时 我以 hprof 格式进行了堆转储 生成的hprof文件超过5GB 当我在 VisualVM Mat 分析器或 you
  • 如何使用回形针裁剪然后调整大小

    我有一个照片附件 正在使用回形针保存 但是 我想在保存之前先处理照片 方法是裁剪照片 然后调整大小到最终尺寸 例如我有一张 900x900 的照片 我想首先将中央裁剪为 500x500 然后将裁剪后的照片调整为缩略图大小 100x100 这
  • 使用单元格中的值作为公式中的单元格引用?

    我想知道如何从另一个单元格的值中提取单元格引用并将其插入公式中 举个简单的例子 在单元格 A1 中我有这个 COUNT B4 H4 我不想在设置公式时选择范围 而是希望该范围是动态的 基于其他单元格中的值 所以 我想输入单元格引用 cell
  • python manage.py runserver 不显示任何内容

    我曾经使用 django 工作 过去没有遇到这个问题 然后我转移了一段时间到 Laravel 当然我在 Windows 中改变了很多我不记得的东西 现在当我击中python manage py runserver 什么也没发生 外壳看起来就
  • 如何在应用程序一开始就破坏堆栈

    堆栈帧指针 EBP 应始终指向前一个堆栈帧正确的位置 但为什么我的应用程序中不是这样 这表明确实有问题 很难相信 我创建了多个简单的演示应用程序 其中堆栈指针始终指向前一个堆栈帧 但我无法理解为什么此应用程序中不是这种情况 而是在我的应用程
  • Formik - 类型错误:无法读取未定义的属性“类型”?

    我几乎刚刚从这里复制粘贴此代码 https codesandbox io s formik checkbox example 96miz from embed function Checkbox props return