React-Native中Formik表单InputField的onChangeText触发运行时错误如何解决？

问题根源 #

两个报错本质都是没有正确获取到Formik暴露的values、handleChange等核心API：

• 调用values属性报错是因为没有从Formik上下文/返回值中拿到正确的values对象
• handleChange传参报错大概率是调用方式不符合Formik的API约定，或是handleChange本身就没有被正确获取到

具体解决方案 #

情况1：使用<Formik>组件式写法

确保输入容器放在Formik组件的render函数回调中，才能拿到注入的Formik属性，示例正确写法：

import { Formik } from 'formik';
import { TextInput, Button } from 'react-native';

export default function App() {
  return (
    <Formik
      initialValues={{ username: '' }} // 必须提前定义你要用到的字段
      onSubmit={(values) => console.log('提交数据：', values)}
    >
      {/* 必须用函数包裹，才能拿到Formik注入的所有属性 */}
      {({ values, handleChange, handleSubmit }) => (
        <>
          <TextInput
            value={values.username}
            onChangeText={handleChange('username')} // 直接传调用后返回的函数即可，RN会自动把输入值传入
            placeholder="请输入用户名"
          />
          <Button title="提交" onPress={handleSubmit} />
        </>
      )}
    </Formik>
  )
}

情况2：使用useFormik Hook写法

确保在组件顶层调用Hook，直接从返回对象中取需要的属性：

import { useFormik } from 'formik';
import { TextInput, Button } from 'react-native';

export default function App() {
  const formik = useFormik({
    initialValues: { username: '' },
    onSubmit: (values) => console.log('提交数据：', values),
  });

  return (
    <>
      <TextInput
        value={formik.values.username}
        onChangeText={formik.handleChange('username')}
        placeholder="请输入用户名"
      />
      <Button title="提交" onPress={formik.handleSubmit} />
    </>
  )
}

情况3：输入框拆分为独立子组件

如果输入框是单独封装的组件，要么逐层传递Formik属性，要么用useFormikContext在子组件内直接获取上下文：

// 子组件代码
import { useFormikContext } from 'formik';
import { TextInput } from 'react-native';

export default function UsernameInput() {
  const { values, handleChange } = useFormikContext();
  return (
    <TextInput
      value={values.username}
      onChangeText={handleChange('username')}
      placeholder="请输入用户名"
    />
  )
}

兜底兼容写法

如果handleChange传参仍然有问题，可以换成更灵活的setFieldValue方法手动赋值：

// 从Formik属性中取出setFieldValue
onChangeText={(text) => setFieldValue('username', text)}

内容的提问来源于stack exchange，提问作者nicog