时间戳

首页 > 解决方案 > Formik / 元素类型无效 - 得到“未定义”

react-native - Formik / 元素类型无效 - 得到“未定义”

问题描述

我正在尝试将 Formik 用于 React Native。我基本上复制粘贴了对我不起作用的普通文档示例，并且没有找到任何其他相关示例来帮助。 https://formik.org/docs/guides/react-native

我也尝试使用功能组件：

 import React, { useState, useRef } from 'react';
import {
  Text, StyleSheet
} from 'react-native';
import { Formik} from "formik";
import { Card, Button, TextInput, View  } from 'react-native-elements';


function AddActivityScreen() {
 return(
   <Formik
     initialValues={{ email: '' }}
     onSubmit={values => console.log(values)}
     >
     {({ handleChange, handleBlur, handleSubmit, values }) => (
      <View>
        <TextInput
          onChangeText={handleChange('email')}
          onBlur={handleBlur('email')}
          value={values.email}
        />
        <Button onPress={handleSubmit} title="Submit" />
      </View>
    )}
   </Formik>
 )
}

export default AddActivityScreen;

我一直有这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Formik`.

我不明白 Formik 有什么问题，因为我只是在执行文档中提供的代码示例。请有人帮助

标签： react-nativeformik

解决方案

问题与 Formik 无关，而是与您的其他组件的导入有关

您正在从该包中不存在的 react-native-elements 导入 TextInput 和 View，它们是 react-native 本身的一部分。

当您这样做并尝试渲染时，会出现上述错误。

如下更改您的导入

import React, { useState, useRef } from 'react';
import {
  Text, StyleSheet,TextInput, View 
} from 'react-native';
import { Formik} from "formik";
import { Card, Button } from 'react-native-elements';

推荐阅读