React和Typescript，警告:React.createElement: type无效——期望是字符串，但得到:

Question

我在react中有一个项目，最近被重写为typescript。现在，修改后，当我想添加一个组件时，我收到一个错误:

"警告:反应。createElement: type无效——期望是字符串(对于内置组件)或类/函数(对于复合组件)，但得到:未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。">

这是我的索引。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;

这是我试图添加到我的索引组件。tsx as<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;

知道为什么我收到一个错误吗?如果你能帮我解决这个问题，我会很感激的。

Answer 1

当你导出ImagePicker时，它会使用ImagePicker from "expo-image-picker"您需要导出默认的PickImage。

Answer 2

您默认导出的是ImagePicker而不是PickImage