TypeError: undefined не является функцией (рядом с "... dataSource.map ...")

Question

Я пытаюсь отобразить данные API на странице, но получаю эту ошибку

TypeError: undefined не является функцией (рядом с «... dataSource.map ...»)

Несвязанный вопрос: Также я новичок в разработке мобильных приложений, и мне интересно, когда вы получаете данные из API, лучше всего хранить их в базе данных или отображать непосредственно на странице?

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

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

      useEffect(async () => {
        const response = await fetch(
          "https://facebook.github.io/react-native/movies.json"
        );
        const data = await response.json();
        const movies = data.title;
        setdataSource(movies);
        setisLoading(false);

        // .catch((error)) => {
        //   console.log(error)
        // }
      }, []);


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

        return (
          <ScreenContainer style={styles.container}>
            <View>{moviest}</View>
          </ScreenContainer>
        );
      }

Answer 1

Вы должны проверить, что dataSource имеет значение null или undefined перед map.

let moviest = dataSource && dataSource.map((val, key) => {

Answer 2

Пожалуйста, проверьте тип dataSource.

Когда я проверяю https://facebook.github.io/react-native/movies.json данные, тип data.title является строкой («Основы - Сеть»)

Возможно, вам стоит использовать movies.

const data = await response.json();
const movies = data.movies;
setdataSource(movies);
setisLoading(false);