"Check the render method of" 反应本机错误

Question

我知道这个问题已经被问了很多，但没有一个解决方案可以解决我的问题。我在我的 App 文件中呈现特定组件时遇到此问题，该组件是一个表单的“ListingEditScreen”，我说的错误

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 ListingEditScreen.

我的代码如下

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

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

然后这是我的 ListingEditScreen

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import * as Yup from "yup";
import {
  AppForm,
  AppFormField,
  AppFormPicker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";

const validationSchema = {
  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.string().required().nullable().label("Category"),
};

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

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

所以我哪里会出错，因为从其他问题来看，这似乎是一个导入问题，但我已经检查了我所有的导入，它们看起来都很好，所以可能是什么问题，在此先感谢。

编辑：问题似乎出在 AppFormPicker 中，这是下面的代码。首先，这是我的表单文件夹 index.js

export {default as AppForm} from "./AppForm"
export {default as AppFormField} from "./AppFormField"
export {default as AppFormPicker} from "./AppFormPicker"
export {default as FormError} from "./FormError"
export {default as SubmitButton} from "./SubmitButton"

然后是AppFormPicker组件

import React from "react";
import { useFormikContext } from "formik";
import { FormError } from "./FormError";
import AppPicker from "../AppPicker";

export default function AppFormPicker({ items, name, placeholder }) {
  const { errors, setFieldValue, touched, values } = useFormikContext();

  return (
    <>
      <AppPicker
        items={items}
        onSelectItem={(item) => setFieldValue(name, item)}
        placeholder={placeholder}
        selectedItem={values[name]}
      />
      <FormError error={errors[name]} visible={touched[name]} />
    </>
  );
}

我的文件结构是这样的 app⬇components⬇forms⬇➡AppForm.js,AppFormField.js,AppFormPicker.js,FormError.js,SubmitButton.js

这是调试器上的全部错误

Answer 1

在 AppFormPicker 的定义中：

尝试更改：

return (
    <>
      <AppPicker
        items={items}
        onSelectItem={(item) => setFieldValue(name, item)}
        placeholder={placeholder}
        selectedItem={values[name]}
      />
      <FormError error={errors[name]} visible={touched[name]} />
    </>
  );

成为：

return (
    <React.Fragment>
      <AppPicker
        items={items}
        onSelectItem={(item) => setFieldValue(name, item)}
        placeholder={placeholder}
        selectedItem={values[name]}
      />
      <FormError error={errors[name]} visible={touched[name]} />
    </React.Fragment>
  );

我怀疑错误消息将 <> 视为名称未定义的组件。在那里，你实际上没有组件名称。

"Check the render method of" 反应本机错误

"Check the render method of" react native error

reactjs

react-native

expo

yup

formik