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之前检查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);

TypeError：undefined不是函数（在“ ... dataSource.map ...”附近）

2 个答案: