在render（）中显示featch json数据时，React Native发生错误

Question

我是React的新手-原生开发。我需要使用 {this.state.data.min.en}

在render（）中显示此json数据

{
  "status": true,
  "message": "good",
  "data": {
    "min": {
      "sin": "text",
      "en": " text",
      "ta": "text",
      "ownere": "  text"
    }
  }
}

代码：

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  AppRegistry,
  Alert
} from "react-native";
import { Card } from "react-native-elements";

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  handlePress = async () => {
    fetch("http://xxx.xx.xx.xx/index.php/testCV/home", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({ data: responseJson.data });
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.handlePress();
  }

  render() {
    return (
      <View>
        <Card>{this.state.data.min.en}</Card>
      </View>
    );
  }
}

AppRegistry.registerComponent("Home", () => Home);

我使用上面的代码尝试它，但是当我运行它时，出现此错误。我试图找到解决方法，但是没有运气。

非常感谢有人可以帮助我解决此错误。 谢谢

Answer 1

您正在将数据默认为空数组，因此当您写this.state.data.min时，您会得到undefined，然后尝试访问en会导致错误。

您可以例如将data默认设置为null，并等待数据加载完毕后再呈现。

示例

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  // ...

  render() {
    const { data } = this.state;

    if (data === null) {
      return null;
    }

    return (
      <View>
        <Card>{data.min.en}</Card>
      </View>
    );
  }
}