Json 我有一个问题，未定义的对象不是对象（评估'；this.state.dataSource.map'；）

我想显示在线json url中的位置列表

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  Dimensions,
  Image,
  StatusBar,
  TextInput,
  TouchableOpacity,
  Text,
  Button,
  Platform,
  Alert,
  FlatList,
  ActivityIndicator,
} from "react-native";

let url = "https://cz2006api.herokuapp.com/api/getAll";
let url2 = "";

export default class ClinicComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null,
    };
  }

  componentDidMount() {
    return fetch("https://cz2006api.herokuapp.com/api/getAll")
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.data.data,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      let hospitals = this.state.dataSource.map((val, key) => {
        return (
          <View key={key} style={styles.item}>
            <Text>{val.name}</Text>
          </View>
        );
      });
      return (
        <View style={styles.item}>
          {/* <Text>Content Loaded</Text> */}
          {hospitals}
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  item: {
    flex: 1,
    alignSelf: "stretch",
    margin: 10,
    alignItems: "center",
    justifyContent: "center",
    borderBottomWidth: 1,
    borderBottomColor: "#eee",
  },
});

import React，{Component}来自“React”；
进口{
看法
样式表，
尺寸，
形象,，
状态栏，
文本输入，
可触摸不透明度，
文本，
按钮
平台，
警觉的，
平面列表，
活动指示器，
}从“反应本族语”；
让url=”https://cz2006api.herokuapp.com/api/getAll";
设url2=“”；
导出默认类组件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：null，
};
}
componentDidMount（）{
返回取回（“https://cz2006api.herokuapp.com/api/getAll")
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据源：responseJson.data.data，
});
})
.catch（（错误）=>{
console.log（错误）；
});
}
render（）{
if（此.state.isLoading）{
返回(

有人能帮我吗！！！我只想有一个可以滚动的医院列表。谢谢！
Json的URL在这里：
删除componentDidMount中的返回：

componentDidMount() {
    fetch("https://cz2006api.herokuapp.com/api/getAll")
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          dataSource: responseJson.data.data,
          isLoading: false,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

只需将初始状态更改为如下所示

    this.state = {
      isLoading: true,
      dataSource: [],  // <-- here
    };

this.state={
孤岛加载：是的，
数据来源：[]，/我同意@Nguy的观点ễn建议您的初始状态应该是
数组
。然而，问题的根源似乎是从JSON响应中获取正确的属性

首先，您需要
responseJson.data
而不是
responseJson.data.data
。这会给我一个
数组
，并显示一个长列表，但标题都是空的。这是因为您的响应将
名称
作为大写属性，但您正在访问
名称
。因此您也需要更改它

export default class ClinicComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
  }

  componentDidMount() {
    return fetch('https://cz2006api.herokuapp.com/api/getAll')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.data,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }
  render() {
    //console.log(this.state.dataSource?.[0]);
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
        <View style={styles.item}>
          {/* <Text>Content Loaded</Text> */}
          {this.state.dataSource.map((val, key) => (
            <View key={val._id} style={styles.item}>
              <Text>{val.Name}</Text>
            </View>
          ))}
        </View>
      );
    }
  }
}

导出默认类组件扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：[]，
};
}
componentDidMount（）{
返回获取（'https://cz2006api.herokuapp.com/api/getAll')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据源：responseJson.data，
});
})
.catch（（错误）=>{
console.log（错误）；
});
}
render（）{
//console.log（this.state.dataSource？[0]）；
if（此.state.isLoading）{
返回(
);
}否则{
返回(
{/*加载的内容*/}
{this.state.dataSource.map（（val，key）=>(
{val.Name}
))}
);
}
}
}

您正在获取大量数据，您可能需要某种具有无限滚动的分页。由于我们正在获取的巨大负载，加载速度非常慢

geocodingData
部分内的JSON响应中也存在双重转义问题。您希望将此数据作为对象返回，但它是一个转义字符串，包含大量的
\“