React Native 组件异常 - 元素类型无效：预期的字符串...未定义答案

【问题标题】：React Native Component Exception - Element Type is invalid: expected string...got undefinedReact Native 组件异常 - 元素类型无效：预期的字符串...未定义
【发布时间】：2021-03-13 23:20:06
【问题描述】：

我最近在我的项目中添加了一个组件，但由于某种原因出现了这个错误。我知道它从组件中正确导出并由 App.js 正确导入。（默认导出，不带 {} 导入）。

当我将 App 的导出从函数声明中的导出更改为使用“导出默认 App;”行从下面导出时，这也很奇怪错误改变。通常它告诉我“检查'ListingEditScreen'的渲染方法。”在错误的底部。但是当我用 App 函数声明下面的行导出时，它说，“检查 'ExpoRoot' 的渲染方法。”

我在这个项目中使用 Expo，但在 Expo 文件夹中找不到 ExpoRoot 组件。

这是我的组件：

import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";

const validationSchema = Yup.object().shape({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).max(10000).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().required().nullable().label("Category"),
});

const categories = [
  { label: "Furniture", value: 1 },
  { label: "Clothing", value: 2 },
  { label: "Camera", value: 3 },
];

function ListingEditScreen() {
  return (
    <Screen style={styles.container}>
      <Form
        initialValues={{
          title: "",
          price: "",
          description: "",
          category: null,
        }}
        onSubmit={(values) => console.log(values)}
        validationSchema={validationSchema}
      >
        <FormField maxLength={255} name="title" placeholder="Title" />
        <FormField
          keyboardType="numeric"
          maxLength={8}
          name="price"
          placeholder="Price"
        />
        <Picker items={categories} name="category" placeholder="Category" />
        <FormField
          maxLength={255}
          multiline
          name="description"
          numberOfLines={3}
          placeholder="Description"
        />
        <SubmitButton title="Post" />
      </Form>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});
export default ListingEditScreen;

这是我当前的 App.js：

import React from "react";
import ListingEditScreen from "./app/screens/ListingEditScreen";

export default function App() {
  return <ListingEditScreen />;
}

这是iOS模拟器上的错误截图：

非常感谢任何帮助！谢谢。

【问题讨论】：

标签： javascript reactjs react-native expo ios-simulator

【解决方案1】：

此错误表示您正在渲染未定义的组件。这会引发同样的错误：

const Example;

function App() {
  return <Example />
}

我的猜测是这些组件之一未正确命名或未正确从表单文件中导出：

import {
  AppForm as Form,
  AppFormField as FormField,
  AppFormPicker as Picker,
  SubmitButton,
} from "../components/forms";

例如，如果 SubmitButton 实际上是 Button，那么您会看到此错误。

【讨论】：