首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Formik的handleChange在DateInput的onChange上抛出"TypeError: null不是对象(计算'_a.type')“

Formik是一个流行的React表单库,用于简化表单处理的复杂性。它提供了一组方便的API和组件,用于处理表单的状态管理、验证和提交等功能。

在Formik中,handleChange是一个函数,用于处理表单元素的值变化事件。它通常与表单元素的onChange事件一起使用。当表单元素的值发生变化时,handleChange会更新Formik的表单状态,并触发重新渲染。

根据提供的问答内容,出现了一个错误:"TypeError: null不是对象(计算'_a.type')”。这个错误通常表示在handleChange函数中,尝试访问一个null对象的属性或方法。可能的原因是在DateInput组件的onChange事件中,传递了一个null值给handleChange函数。

为了解决这个错误,我们可以检查传递给handleChange的值是否为null,如果是null,则不调用handleChange函数。以下是一个示例代码:

代码语言:txt
复制
import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      date: null,
    },
    onSubmit: values => {
      console.log(values);
    },
  });

  const handleDateChange = (event) => {
    if (event.target.value !== null) {
      formik.handleChange(event);
    }
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      <DateInput
        name="date"
        value={formik.values.date}
        onChange={handleDateChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

在上面的示例中,我们通过添加一个条件判断来避免传递null值给handleChange函数。这样可以防止出现"TypeError: null不是对象(计算'_a.type')"的错误。

关于Formik的更多信息和使用方法,你可以参考腾讯云的相关产品文档:Formik - 腾讯云产品文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2023 React 生态系统,以及我的一些吐槽……

然后,Next.js 为你的应用程序提供额外的结构、功能和优化。 在背后,Next.js 还为您抽象和自动配置工具,例如打包、编译等。这使你可以专注于构建应用程序,而不是花时间设置工具。...根据我们的先知 Dan Abramov 的说法,表单状态本质上是短暂且局部的,因此在 Redux(或任何 Flux 库)中跟踪它是不必要的。...不是因为我认为 React 在实现表单方面采取了错误的方法,而是因为在使用 React 时,表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...事实上,这正是我喜欢 React 的原因!然而,相比起将数据传递给 props,处理表单要更具挑战性。解析数据、格式化、本地状态、prop 的变化...所有这些在 React 中都是挑战。...此外,Formik 依赖于表单元素,并且在控制 Redux 存储时存在一些挑战。

78530
  • React 组件优化

    值; init 惰性初始化函数,该函数的参数是我们传入的第二个 initialArg 参数,这么做可以将用于计算 state 的逻辑提取到 reducer 外部。...state 如果是一个引用类型,比如数组或者对象,当往数组中 push 新的项时,我们必须要克隆一份才行,如果不克隆,react 会认为 state 并没有更新。...Formik /> 组件比较复杂,在构建 Formik 表单程序时,Formik 和下面它的几个属性是需要设置的: initialValues 接收一个对象,表示初始化的表单控件的值,对象的键应是表单的.../> 组件可以让你不用再手动创建 onSubmit 或 onResize 事件句柄,在 Formik 组件中直接书写即可。...在 Formik 官网,作者也举例了使用 redux-form 的缺陷: 表单状态本质上是短暂的和局部的,并不需要 redux 对其进行跟踪; 使用 redux 管理状态时,状态更新要派发 action

    7.2K20

    React技巧之设置input值

    我们在控件上设置了onChange属性,因此每当控件的值有更新时,handleChange函数就会被调用。 在handleChange函数中,当用户键入时,我们更新了输入控件的状态。...我们在button元素上设置了onClick属性。每当按钮被点击时,handleClick函数就会被调用。 要更新输入控件的状态,只需更新state变量。...然而,这并不是必须的,如果你不想设置初始值,你可以省略这个属性。 当使用不受控制的输入控件时,我们使用ref来访问input元素。useRef()钩子可以被传递一个初始值作为参数。...useRef钩子创建了一个普通的JavaScript对象,但在每次渲染时都给你相同的ref对象。换句话说,它几乎是一个带有.current属性的记忆化对象值。...你不应该在一个不受控制的input(一个没有onChange处理函数的输入控件)上设置value属性,因为这将使输入控件不可变,你将无法在其中键入。

    2K10

    使用 useState 需要注意的 5 个问题

    ,它只在左侧表达式为真(如果 user.names 存在)时计算右侧表达式。...,不同的是,如果引用的对象或属性缺失(即 null 或 undefined),表达式短路并返回 undefined 值。简单地说,如果丢失了任何链接对象,它就不会继续进行链接操作(短路)。...这将在预定的更新时间将当前状态传递给回调函数,从而可以在尝试更新之前知道当前状态。 因此,让我们修改示例演示,使用函数更新而不是直接更新。...: image.png 点击按钮后的更新状态: image.png 正如你所看到的,用户不再是一个对象,而是被改写为字符串 "Mark",而不是特定的属性被修改。...={handleChange} name='firstName' placeholder='First Name' /> onChange={handleChange

    5K20

    从componentWillReceiveProps说起

    但实际上,componentWillReceiveProps在每次rerender时都会调用,无论props变了没: class A extends React.Component { render(...“受控”与“不受控” 组件分为受控组件与不受控组件,同样,数据也可以这样理解 受控组件与不受控组件 针对表单输入控件(、、等)提出的概念,语义上的区别在于受控组件的表单数据由...={this.handleChange} value={this.state.email} />; } } 所以,在需要复制props到state的场景,要么考虑把props收进来完全作为自己的state...五.缓存计算结果 另一些时候,拷贝props到state是为了缓存计算结果,避免重复计算 例如,常见的列表项按输入关键词筛选的场景: class Example extends Component {...时才会再次调用的特性,直接在render()里放心做计算 看起来很完美,但实际场景的state和props一般不会这么单一,如果另一个计算无关的props或state更新了也会引发rerender,产生重复计算

    2.4K20

    React 进阶 - 事件系统

    比如: 给元素绑定的事件,不是真正的事件处理函数 在冒泡 / 捕获阶段绑定的事件,也不是在冒泡 / 捕获阶段执行的 在事件处理函数中拿到的事件源 e ,也不是真正的事件源 e React 为什么要写出一套自己的事件系统呢...由于不是绑定在真实的 DOM 上,所以 React 需要模拟一套事件流:事件捕获 -> 事件源 -> 事件冒泡,也包括重写一下事件源对象 event 事件系统,大部分处理逻辑都在底层处理了,对后期的 SSR...,对事件标签中事件的收集,向 container 注册事件 一次用户交互,事件触发,到事件执行一系列过程 事件合成 React 的事件不是绑定在元素上的,而是统一绑定在顶部容器上 在 v17 之前是绑定在...document 上的 在 v17 改成了 app 容器上,这样更利于一个 html 下存在多个应用(微前端) 绑定事件并不是一次性绑定所有事件 如发现了 onClick 事件,就会绑定 click...React 在初始化真实 DOM 的时候,用一个随机的 key internalInstanceKey 指针指向了当前 DOM 对应的 fiber 对象,fiber 对象用 stateNode 指向了当前的

    1.2K10

    react冷门小知识

    1. react合成事件 SyntheticEvent React在原生的DOM事件上封装了一层,称为SyntheticEvent(合成事件)。所有事件都会冒泡到根节点上,然后进行后续处理。...事件池中装满了SyntheticEvent对象,需要时池中取出使用,用完后再放回池中,这就意味着 SyntheticEvent对象可以被缓存且反复使用。目的是提高性能,减少创建不必要的对象。...当调用事件回调函数之后,合成对象上的所有属性重置为null,但是合成事件对象依旧存在。...因此,写React事件回调函数的时候不能将 event 用于异步操作 —— 当异步操作真正执行的时候,SyntheticEvent对象有可能已经被重置了。...当然,如果节点上绑定了事件,且事件和节点内容相关,那么请务必小心,为了不必要的Bug,还是建议加上key。

    46620

    常见react面试题(持续更新中)

    也就是key值不一样的时候通常我们输出节点的时候都是map一个数组然后返回一个ReactNode,为了方便react内部进行优化,我们必须给每一个reactNode添加key,这个key prop在设计值处不是给开发者用的...构造函数主要用于两个目的:通过将对象分配给this.state来初始化本地状态将事件处理程序方法绑定到实例上所以,当在React class中需要设置state的初始值或者绑定事件时,需要加上构造函数,...JavaScript中的map不会对为null或者undefined的数据进行处理,而React.Children.map中的map可以处理React.Children为null或者undefined的情况...={this.handleChange}> {/*x代表的真实的dom,把元素挂载在了当前实例上...因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。当然,实质上 React 的源码里不是数组,是链表。

    2.6K20
    领券