Je reçois cette erreur:

Violation invariante: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction mais obtenu: indéfini

J'ai regardé d'autres solutions mais aucune n'a pu fonctionner

C'est mon code

      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
Jay Alli 15 juin 2020 à 18:34

1 réponse

Meilleure réponse

ActivityIndicator est une exportation de react-native, pas de react.

Changez pour ceci:

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

À l'avenir, cette erreur est presque toujours le résultat d'une importation incorrecte. Parfois, c'est un mélange d'importations par défaut et nommées, parfois l'importation est mal placée ("Activityindicator" au lieu de "ActivityIndicator" par exemple), ou parfois c'est le mauvais chemin relatif ou module de nœud (comme dans ce cas).

La vérification de chaque importation doit être la première étape de débogage lorsque vous obtenez cette erreur.

2
Brian Thompson 15 juin 2020 à 15:37