React 和 Typescript，警告：React.createElement：类型无效 - 期望字符串但得到：未定义答案

【问题标题】：React and Typescript, Warning: React.createElement: type is invalid -- expected a string but got: undefinedReact 和 Typescript，警告：React.createElement：类型无效 - 期望字符串但得到：未定义
【发布时间】：2021-12-03 15:11:06
【问题描述】：

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

“警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的组件从它定义的文件中，或者你可能混淆了默认和命名的导入。”

这是我的 index.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;

这是我试图以<ImagePicker/> 的形式添加到我的 index.tsx 的组件

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;

知道为什么我会收到错误消息吗？我会很高兴为这个问题提供帮助

【问题讨论】：

标签： javascript reactjs typescript react-native expo

【解决方案1】：

当您导出 ImagePicker 时，它使用“expo-image-picker”中的 ImagePicker。您需要导出默认的 PickImage。

【讨论】：

【解决方案2】：

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

【讨论】：