Реагировать и машинопись, Предупреждение: React.createЭлемент: тип недопустим — ожидалась строка, но получено: не определено

#javascript #reactjs #typescript #react-native #expo

Вопрос:

У меня есть проект в react, который недавно был переписан на машинописный текст. Теперь, после изменений, когда я хочу добавить один компонент, я получил сообщение об ошибке:

«Предупреждение: React.createElement: тип недопустим-ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.»

Это мой индекс.tsx

 import React from "react";
import { Text, Alert } from "react-native";
import Screen from "../../components/Screen";
import FormField from "../../components/InputText";
import { Formik as FormComponent } from "formik";
import SubmitButton from "../../components/buttons/SubmitButton";

import ImagePicker  from "../../components/forms/ImagePickerForm";



const AddItem = () => {
  return (
    <ScrollView>
      <Screen>
        <ImagePicker />

        <FormComponent
          initialValues={{ title: "", description: "", category: "", images: [] }}
          onSubmit={(values) => Alert.alert("Correct!")} //{(values) => console.log(values)}
          validationSchema={validationSchema}
        >
          {({ handleChange, errors }) => (
            <>

              {/*<Text>{errors.category}</Text>*/}

              <FormField
                name="title"
                placeholder="title"
                onChangeText={handleChange("title")}
                style={{ width: "100%", flex: 1 }}
                maxLength={70}
                multiline
                width={100}
              ></FormField>

              <Text>{errors.title}</Text>

          

              <SubmitButton title="Add item" />
            </>
          )}
        </FormComponent>
      </Screen>
    </ScrollView>
  );
};



export default AddItem;
 

И это компонент, который я пытаюсь добавить в свой index.tsx как <ImagePicker/>

 import React, { useState } from "react";
import * as ImagePicker from 'expo-image-picker';

import ImageInput from "../ImageInput";


const PickImage: React.FC<{}> = () => {
  const [imageUri, setImageUri] = useState();

  const selectImage = async () => {
    try {
      const result: any = await ImagePicker.launchImageLibraryAsync();
      if (!result.cancelled) setImageUri(result.uri);
    } catch (error) {
      console.log("something went wrong");
    }
  };
  return <ImageInput imageUri={imageUri} onChangeImage={(uri) => setImageUri(uri)} />;
}

export default ImagePicker;


 

Есть идеи, почему я получил ошибку?
Я буду очень признателен за помощь в этом вопросе

Ответ №1:

Когда вы экспортируете ImagePicker, он использует ImagePicker из «expo-image-picker». Вам нужно экспортировать изображение выбора по умолчанию.

Ответ №2:

Вы экспортируете по умолчанию ImagePicker вместо PickImage