代码之家  ›  专栏  ›  技术社区  ›  Supun Abesekara

在render()中显示Featch JSON数据时,react native出错。

  •  1
  • Supun Abesekara  · 技术社区  · 6 年前

    我是新来的反应-本土发展。我有这个json数据需要在render()中使用 this.state.data.min.en. 显示。

    。{
    “状态”:正确,
    “message”:“好”,
    “数据”:。{
    “最小”:。{
    “sin”:“文本”,
    “en”:“文本”,
    “ta”:“文本”,
    “owner”:“文本”
    }
    }
    }
    

    代码:

    import react,component from“react”;
    导入{
    平台,
    样式表,
    文本,
    视图,
    学徒,
    警觉的
    }来自“react native”;
    从“react native elements”导入卡;
    
    导出默认类home extends组件{
    构造函数()。{
    super();
    本州={
    数据:[]
    };
    }
    
    handlePress=异步()=>。{
    获取(“http://xxx.xx.xx.xx/index.php/testcv/home”,{
    方法:“post”,
    标题:{
    “content type”:“应用程序/json”
    }
    })
    .then(response=>response.json())
    。然后(responsejson=>){
    this.setState(数据:responseJSON.data);
    })
    .catch(错误=>){
    控制台。错误(错误);
    (});
    };
    
    组件didmount()。{
    这个.handlepress();
    }
    
    呈现()。{
    返回(
    <查看>
    <card>this.state.data.min.en</card>
    </View>
    ;
    }
    }
    
    appregistry.registercomponent(“主页”,()=>主页);
    

    我尝试使用上面的代码,但当我运行它时,我会得到这个错误。我试着找到解决问题的方法,但没有运气。

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

    代码:

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

    我尝试使用上面的代码,但当我运行它时,我会得到这个错误。我试着找到解决问题的方法,但没有运气。

    enter image description here

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

    1 回复  |  直到 6 年前
        1
  •  2
  •   Tholle    6 年前

    您将数据默认为空数组,因此当您写入 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>
        );
      }
    }