Javascript 在render（）中显示featch json数据时在react Native中出错

我是新来的反应-本土发展。我需要使用{this.state.data.min.en}

{
  "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);

import React，{Component}来自“React”；
进口{
平台，
样式表，
文本，
看法
评估学，
警觉的
}从“反应本族语”；
从“react native elements”导入{Card}；
导出默认类Home extends组件{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
handlePress=async（）=>{
取回（“http://xxx.xx.xx.xx/index.php/testCV/home", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
}
})
.then（response=>response.json（））
.然后（responseJson=>{
this.setState（{data:responseJson.data}）；
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这是一只手；
}
render（）{
返回(
{this.state.data.min.en}
);
}
}
AppRegistry.registerComponent（“主页”，（）=>主页）；

我尝试使用上面的代码，但当我运行它时，我得到了这个错误。我试着想办法解决它，但运气不好

非常感谢有人能帮我解决这个错误。

---

谢谢

您将数据默认为空数组，因此当您写入

this.state.data.min

时，您将得到

未定义的
，然后尝试访问上的
en
，这将导致您的错误

例如，您可以将
数据
默认为
空
，并等待数据加载后再进行渲染

示例

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

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：空
};
}
// ...
render（）{
const{data}=this.state；
如果（数据===null）{
返回null；
}
返回(
{data.min.en}
);
}
}