Question

我想显示来自在线 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 不是对象 enter image description here

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

Answer 1

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

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

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

Answer 2

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

Answer 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 响应中也存在双重转义问题。您想将此数据作为对象返回，但它是一个带有大量 \" 的转义字符串。

我有这个问题 undefined is not an object（评估'this.state.dataSource.map'）

3 个答案: