我有这个问题未定义不是一个对象（评估'this.state.dataSource.map'）答案

【问题标题】：I have this issue undefined is not an object (evaluating 'this.state.dataSource.map')我有这个问题未定义不是一个对象（评估'this.state.dataSource.map'）
【发布时间】：2021-03-20 13:10:33
【问题描述】：

我想显示来自在线 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",
  },
});

不幸的是，当我尝试通过 expo cli 运行它时，我得到了一个错误，说 undefined is not an object enter image description here

谁能帮帮我！！！我只想有一个可滚动的医院列表。谢谢！ Json 的 URL 在这里：https://cz2006api.herokuapp.com/api/getAll

【问题讨论】：

标签： json react-native

【解决方案1】：

只需将您的初始状态更改为这样的状态

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

您的问题是您正在使用dataSource.map，但在调用您的dataSource 的api 期间仍然保持为空，直到它得到响应，并且空对象没有属性map。这就是你的问题的原因。

【讨论】：

【解决方案2】：

去掉componentDidMount中的return：

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);
      });
  }

【讨论】：

【解决方案3】：

我同意@Nguyễn 的建议，即您的初始状态应该是array。然而，问题的根源似乎是从您的 JSON 响应中获取正确的属性。

首先，您需要responseJson.data 而不是responseJson.data.data。这给了我一个array 并显示了一个很长的列表，但标题都是空白的。这是因为您的响应将Name 作为大写属性，但您正在访问name。所以你也需要改变它。

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>
      );
    }
  }
}

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

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

【讨论】：