#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