Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs TypeError:undefined不是函数(靠近“dataSource.map…”)_Reactjs_React Native - Fatal编程技术网

Reactjs TypeError:undefined不是函数(靠近“dataSource.map…”)

Reactjs TypeError:undefined不是函数(靠近“dataSource.map…”),reactjs,react-native,Reactjs,React Native,我试图将API数据呈现到页面上,但出现此错误 TypeError:undefined不是函数(靠近“…dataSource.map…”) 不相关的问题:我对移动应用程序开发还不熟悉,我想知道什么时候从API获取数据是将数据存储在数据库中还是直接呈现在页面上的最佳实践 import React, { Component, useState, useEffect } from "react"; import { View, Text, StyleSheet, ActivityIndi

我试图将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>
        );
      }
import React,{Component,useState,useffect}来自“React”;
从“react native”导入{View,Text,StyleSheet,ActivityIndicator};
从“react native screens”导入{ScreenContainer};
export const Home=()=>{
const[isLoading,setisLoading]=useState(true);
const[dataSource,setdataSource]=useState(null);
useffect(异步()=>{
const response=等待获取(
"https://facebook.github.io/react-native/movies.json"
);
const data=wait response.json();
const movies=data.title;
setdataSource(电影);
设置加载(假);
//.catch((错误))=>{
//console.log(错误)
// }
}, []);
如果(孤岛加载){
返回(
);
}否则{
让moviest=dataSource.map((val,key)=>{
返回(
{val}
);
});
返回(
{moviest}
);
}

在映射
之前,必须检查
数据源
是否为空或未定义


let moviest=dataSource&&dataSource.map((val,key)=>{
请检查
数据源的类型

当我检查
https://facebook.github.io/react-native/movies.json
数据,数据类型。标题为字符串(“基础-网络”)

也许你应该使用
电影

const data=wait response.json();
const movies=data.movies;
setdataSource(电影);
设置加载(假);