首页
学习
活动
专区
工具
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 存储时存在一些挑战。

72530
  • React 组件优化

    值; init 惰性初始化函数,该函数参数是我们传入第二个 initialArg 参数,这么做可以将用于计算 state 逻辑提取到 reducer 外部。...state 如果是一个引用类型,比如数组或者对象,当往数组中 push 新项时,我们必须要克隆一份才行,如果不克隆,react 会认为 state 并没有更新。... 组件比较复杂,构建 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' /> <input type='text' 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.1K10

    常见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

    react冷门小知识

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

    46520
    领券