不变违规：元素类型无效：期望字符串（用于内置组件）或类/函数，但得到：未定义

Posted 2023-02-21

【中文标题】不变违规：元素类型无效：期望字符串（用于内置组件）或类/函数，但得到：未定义

【英文标题】：Invariant Violation: Element type is invalid: expected a string (for built in components) or a class/function but got: undefined

【发布时间】：2020-10-05 01:43:00

【问题描述】：

我收到此错误：

Invariant Violation：元素类型无效：预期为字符串（用于内置组件）或类/函数，但得到：未定义

我查看了其他解决方案，但没有一个能够工作

这是我的代码

      import React, 
      Component,
      useState,
      useEffect,
      ActivityIndicator,
     from "react";
    import  View, Text, StyleSheet  from "react-native";
    import  ScreenContainer  from "react-native-screens";

    export const Home = () => 
      const [isLoading, setisLoading] = useState(true);
      const [dataSource, setdataSource] = useState(null);

      useEffect(() => 
        return fetch("https://facebook.github.io/react-native/movies.json")
          .then((response) => response.json())
          .then((responseJson) => 
            setisLoading(false), setdataSource(responseJson.movies);
          );

      );
      if (isLoading) 
        return (
          <View>
            <ActivityIndicator />
          </View>
        );
       else 
        let moviest = dataSource.map((val, key) => 
          return (
            <View key=key>
              <Text>val.title</Text>
            </View>
          );
        );

        return (
          <ScreenContainer style=styles.container>
            <View>
              <Text>These are the movies</Text>
              moviest 
              /* <Apiusers2 /> */
            </View>
          </ScreenContainer>
        );
      
    ;

【参考方案1】：

ActivityIndicator 是react-native 的导出，而不是react。

改成这样：

import React, 
  Component,
  useState,
  useEffect,
 from "react";
import  View, Text, StyleSheet, ActivityIndicator  from "react-native";
import  ScreenContainer  from "react-native-screens";

以后，这个错误几乎总是由错误的导入造成的。有时它是 default 与 named 导入的混合，有时导入是错误的（例如“Activityindicator”而不是“ActivityIndi​​cator”），或者有时它是错误的相对路径或节点模块（如本例所示）。

检查每个导入应该是出现此错误时的第一个调试步骤。